web-dev-qa-db-ja.com

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>

必要なのは、行の高さが伸びないことです。行の高さを固定する方法はありますか？

csshtml-tablerow
24
Fuxi

テーブルの高さが行の高さよりも大きい場合、HTMLテーブルの行の高さは通常、テーブルの高さに比例して変化します。テーブルは行の高さを強制しているため、テーブルの高さを削除して問題を解決できます。これが受け入れられない場合は、行に明示的な高さを指定し、残りのテーブルの高さにautoサイズになる3番目の行を追加することもできます。

CSS2のもう1つのオプションはMax-Heightプロパティですが、テーブルで奇妙な動作を引き起こす可能性があります。 http://www.w3schools.com/cssref/pr_dim_max-height.asp

。

28
PortageMonkey

style="line-height:0"を各セルに追加するだけです。これは、IEで動作します。これは、IEの存在するテキストと存在しないテキストの両方の行の高さを約19pxに設定し、IEのほとんどのバージョンでセルを強制的に垂直に拡張するためです。 IEが高さ20px未満の行を正しく表示するには、これを行う必要があるテキストがあります。

24
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