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

Question

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

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

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

Я использую IE7

Style

.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>

Answer 1

Таблицы ненадежны (по крайней мере, в 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, сохраняя ячейку / строку одинаковой высоты, независимо от размера окна.

Answer 2

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

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

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

Answer 3

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

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

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

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

table {
    width: 100%;
}
.set-height td {
    position: relative;
    overflow: hidden;
    height: 2em;
}
.set-height p {
    position: absolute;
    margin: .1em;
    left: 0;
    top: 0;
}

<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></tr>
    <tr><td>Foo</td></tr>
    <tr><td>Bar</td></tr>
    <tr><td>Baz</td></tr>
    <tr><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>

Answer 4

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

<table width="100%">
    <tr><td><div style="font-size:2px; height:2px; vertical-align:middle;">&nbsp;</div></td></tr>

Answer 5

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

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

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

Answer 6

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

<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 и нуждался в обоих.

Answer 7

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

overflow:hidden;

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

PS. я не проверял, так что не ненавидь XD