it-swarm.com.ru

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>

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

23
Fuxi

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

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

27
PortageMonkey

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

23
horseFeathers

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

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

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

4
James Black

    
    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>

0
Waruna Manjula