CSS: высота строки исправления

У меня есть эта разметка:

<style>
    table
    {
        border:1px solid black;
        width:400px;
        height:300px;
        border-collapse:collapse;
    }
    table tbody
    {
        border:1px solid red;
    }
    table td
    {
        background:yellow;
        padding:10px;
        border-bottom:1px solid green;
        height:20px;
    }
</style>


<table>
<tbody>
    <tr><td>test</td></tr>
    <tr><td>test</td></tr>
</tbody>
</table>

Мне нужно, чтобы строки не растягивались по высоте. Есть ли способ иметь фиксированную высоту строки?

Ответ 1

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

Другим вариантом в CSS2 является свойство Max-Height, хотя это может привести к странному поведению в таблице. http://www.w3schools.com/cssref/pr_dim_max-height.asp

Ответ 2

Просто добавьте style="line-height:0" в каждую ячейку. Это работает в IE, потому что он устанавливает высоту строки как существующего, так и несуществующего текста примерно до 19px, и это вынуждает ячейки расширяться вертикально в большинстве версий IE. Независимо от того, есть ли у вас текст, это должно быть сделано для того, чтобы IE правильно отображал строки размером менее 20 пикселей.

Ответ 3

Вы также можете попробовать это, если это то, что вам нужно:

<style type="text/css">
   ....
   table td div {height:20px;overflow-y:hidden;}
   table td.col1 div {width:100px;}
   table td.col2 div {width:300px;}
</style>


<table>
<tbody>
    <tr><td class="col1"><div>test</div></td></tr>
    <tr><td class="col2"><div>test</div></td></tr>
</tbody>
</table>

Ответ 4

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