Ответ 1

Таблицы являются iffy (по крайней мере, в 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>

Ответ 2

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

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

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

Ответ 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>

Ответ 4

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

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

Ответ 5

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

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

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

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

Ответ 7

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

overflow:hidden;

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

PS. Я не тестировал его, поэтому не ненавижу XD