Как исправить высоту ТР?

102

Можно ли зафиксировать высоту строки (tr) на столе?

Проблема возникает, когда я сжимаю окно браузера, некоторые строки начинают играть, и я не могу исправить высоту строки.

Я пробовал несколько способов: tr width="20" / tr style="height:20px" / td height="20" / td style="height:20px"

Я использую IE7

Стиль

.tableContainer{
    color:#0076BF;
    margin: -10px 0px -10px 0px;
    border-spacing: 10px;
    empty-cells:show;
    width:90%;
    text-align:left;
} 

.tableContainer tr td{
    white-space:nowrap;
    text-align:left;
}

HTML код.

<table class="tableContainer" cellspacing="10px">
    <tr style="height:15px;">
        <td>NHS Number</td>
        <td>&#160;</td>
        <td>Date of Visit</td>
        <td>&#160;</td>
        <td colspan="3">Care Time Started</td>
        <td>&#160;</td>
        <td rowspan="2" style="text-align:right;vertical-align:bottom;">&#9745;</td>
        <td rowspan="2" style="font-weight:bold;vertical-align:bottom;">Tick when<br/>                        care starts</td>
    </tr>
    <tr>
        <td width="90" class="tableContainerRow2">&#160;</td>
        <td >&#160;</td>
        <td width="80" class="tableContainerRow2">&#160;</td>
        <td >&#160;</td>
        <td width="40" class="tableContainerRow2">&#160;</td>
        <td  width="5">:</td>
        <td width="40" class="tableContainerRow2">&#160;</td>        
        <td >&#160;</td>
    </tr>
</table>
html html-table row Амра
источник

Ответы:

97

Таблицы сомнительны (по крайней мере, в IE), когда дело касается фиксации высоты, а не переноса текста. Думаю, вы обнаружите, что единственное решение - поместить текст внутри divэлемента, например:

td.container > div {
    width: 100%;
    height: 100%;
    overflow:hidden;
}
td.container {
    height: 20px;
}
<table>
    <tr>
        <td class="container">
            <div>This is a long line of text designed not to wrap 
                 when the container becomes too small.</div>
        </td>
    </tr>
</table>
Развернуть фрагмент

Таким образом, divвысота равна высоте содержащей его ячейки, и текст не может увеличиваться div, сохраняя высоту ячейки / строки одинаковой независимо от размера окна.

Энди Э
источник
1
Спасибо за совет. Кажется, это работает, но выглядит немного неаккуратно.
Амра
Рад помочь :-) К сожалению, беспорядочный код обычно бывает в случае взломов и обходных путей.
Энди Э
Я использую [код] .container {width: 100%; максимальная высота: 40 пикселей; переполнение: скрыто; } [/ code] и [code] <div class = 'container'> </div> [/ code].
Cees Timmerman
Я использовал тот же метод, поместив div в тег <th>, и он работал хорошо. У меня была эта проблема только в Chrome. FFox, Safari и IE хорошо поддерживают высоту, установленную в заголовке таблицы. Спасибо, что поделился! :)
Марио Родригес
не работает в сафари ... вам также нужно установить фактическую высоту и ширину в div, а не только в td
Раду Симионеску
15

Попробуйте указать высоту в одной из ячеек, например:

<table class="tableContainer" cellspacing="10px">
 <tr>
  <td style="height:15px;">NHS Number</td>
  <td>&#160;</td>

Однако обратите внимание, что вы не сможете сделать ячейку меньше, чем того требует содержимое. В этом случае вам нужно сначала уменьшить текст.

тыкать
источник
1
Я почти уверен, что вы не используете «px» в атрибутах html.
Откроется
10
Я уверен, что вы можете использовать атрибут стиля.
Бурак Добур
11

Установка tdвысоты меньше естественной высоты его содержимого

Поскольку ячейки таблицы должны быть по крайней мере достаточно большими, чтобы вместить их содержимое, если содержимое не имеет видимой высоты, размер ячеек можно изменять произвольно.

Изменяя размер ячеек, мы можем контролировать высоту строки.

Один из способов сделать это, чтобы установить содержание с absoluteпозицией внутри relativeклетки, и установить heightячейки, а leftи topсодержание.

table {
  width: 100%;
}
td {
  border: 1px solid #999;
}
.set-height td {
  position: relative;
  overflow: hidden;
  height: 3em;
}
.set-height p {
  position: absolute;
  margin: 0;
  top: 0;
}
/* table layout fixed */
.layout-fixed {
  table-layout: fixed;
}
/* td width */
.td-width td:first-child {
  width: 33%;
}
<table><tbody>
  <tr class="set-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
  </tr>
</tbody></table>
<h3>With <code>table-layout: fixed</code> applied:</h3>
<table class="layout-fixed"><tbody>
  <tr class="set-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
  </tr>
</tbody></table>
<h3>With <code>&lt;td&gt; width</code> applied:</h3>
<table class="td-width"><tbody>
  <tr class="set-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
  </tr>
</tbody></table>
Развернуть фрагмент

table-layoutнедвижимость

Вторая таблица в приведенном выше фрагменте была table-layout: fixedприменена, в результате чего ячейкам в родительском элементе присваивается одинаковая ширина, независимо от их содержимого.

По данным caniuse.com , по table-layoutсостоянию на 12 сентября 2019 г. существенных проблем с совместимостью в отношении использования .

Или просто примените widthк конкретным ячейкам, как в третьей таблице.

Эти методы позволяют ячейке, содержащей фактически безразмерный контент, созданный путем применения, position: absoluteзадать произвольный обхват.

Гораздо проще ...

Я действительно должен был подумать об этом с самого начала; мы можем манипулировать содержимым ячеек таблицы уровня блока всеми обычными способами, и без полного разрушения естественного размера содержимого с помощью position: absolute, мы можем оставить таблицу, чтобы выяснить, какой должна быть ширина.

table {
  width: 100%;
}
td {
  border: 1px solid #999;
}
table p {
  margin: 0;
}
.cap-height p {
  max-height: 3em;
  overflow: hidden;
}
<table><tbody>
  <tr class="cap-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td>
  </tr>
  <tr class="cap-height">
    <td><p>Bar</p></td>
    <td>Baz</td>
  </tr>
  <tr>
    <td>Qux</td>
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
  </tr>
</tbody></table>
Развернуть фрагмент

Фред Гандт
источник
Наконец-то ответ выглядит многообещающим! Надо попробовать, как только буду на работе, дам отзыв, если не забуду.
jeromej
1
Работал как шарм! (Предупреждение, что он удаляет text-align: centerи другие уловки центрирования… поскольку он полагается position: absolute)
jeromej
В моем случае это работает для высоты, но при использовании postion: absoluteя теряю автоматическую ширину ячейки. Попытка найти способ, чтобы таблица по-прежнему правильно рассчитывала ширину ячейки, одновременно контролируя высоту строки. Есть предположения?
ash
@ash - я не сразу думаю о каком-либо способе сохранить полностью автоматическую ширину после эффективного уничтожения размера содержимого, но мы можем заставить ячейки таблицы быть произвольно широкими. Я расширил фрагмент примера, чтобы показать один метод, который может вам помочь. Я
подумаю
Спасибо, Фред. Обратите внимание, что у меня могут быть заголовки (<th>), чтобы задать фиксированный размер столбцам, но тогда я обеспокоен тем, что заголовки могут быть слишком узкими или слишком широкими.
пепел
8

Помещение div в td заставило меня работать. 

<table width="100%">
    <tr><td><div style="font-size:2px; height:2px; vertical-align:middle;">&nbsp;</div></td></tr>
user2987600
источник
2

Ширина вашей таблицы составляет 90% относительно ее контейнера.

Если вы сжимаете страницу, вы, вероятно, сжимаете и ширину таблицы. Ширина ячеек также уменьшается, и браузер компенсирует это увеличением высоты.

Чтобы высота оставалась нетронутой, вы должны убедиться, что ширина ячеек может вместить предполагаемое содержимое. Возможно, вы захотите попробовать исправить ширину стола. Или, возможно, поиграйте с минимальной шириной таблицы.

хорошо
источник
1

Мне пришлось сделать это, чтобы получить желаемый результат:

<td style="font-size:3px; float:left; height:5px; vertical-align:middle;" colspan="7"><div style="font-size:3px; height:5px; vertical-align:middle;"><b><hr></b></div></td>

Он отказался работать только с ячейкой или div и нуждался в обоих.

Джен
источник
-5

Это потому, что слова переносятся на новые строки и, следовательно, растягивают TR. Это должно решить вашу проблему:

overflow:hidden;

Поместите это в стили TR Хотя это должно работать, почему бы просто не позволить ему растянуть o0

PS. Я не тестировал это, так что не ненавижу XD

Оззи
источник
3
Не ненавижу, но есть список стилей, поддерживаемых элементом TD в IE, на msdn.microsoft.com/en-us/library/ms535911(VS.85).aspx . overflowне один из них.
Andy E