CSS: исправить высоту строки

Question

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

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

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

Answer 1

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

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

.

Answer 2

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

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

Answer 4

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

Answer 5

    
    table tbody
    {
        border:1px solid red;
    }
    table td
    {
        background:yellow;
        
        border-bottom:1px solid green;
        
        
    }
    .tr0{
        line-height:0;
     }
     .tr0 td{
        background:red;
     }

<table>
<tbody>
    <tr><td>test</td></tr>
    <tr><td>test</td></tr>    
    <tr class="tr0"><td></td></tr>
</tbody>
</table>