1. ホーム
  2. html

[解決済み] TRの高さを固定するには?

2022-10-20 04:35:54

質問

テーブルの行(tr)の高さを固定することは可能でしょうか?

ブラウザのウィンドウを縮小すると問題が現れ、一部の行が遊んでしまい、行の高さを固定することができません。

いくつかの方法を試してみました。 tr width="20" / tr style="height:20px" / td height="20" / td style="height:20px"

私はIE7を使用しています

スタイル

.tableContainer{
    color:#0076BF;
    margin: -10px 0px -10px 0px;
    border-spacing: 10px;
    empty-cells:show;
    width:90%;
    text-align:left;
} 

.tableContainer tr td{
    white-space:nowrap;
    text-align:left;
}

HTMLコードです。

<table class="tableContainer" cellspacing="10px">
    <tr style="height:15px;">
        <td>NHS Number</td>
        <td>&#160;</td>
        <td>Date of Visit</td>
        <td>&#160;</td>
        <td colspan="3">Care Time Started</td>
        <td>&#160;</td>
        <td rowspan="2" style="text-align:right;vertical-align:bottom;">&#9745;</td>
        <td rowspan="2" style="font-weight:bold;vertical-align:bottom;">Tick when<br/>                        care starts</td>
    </tr>
    <tr>
        <td width="90" class="tableContainerRow2">&#160;</td>
        <td >&#160;</td>
        <td width="80" class="tableContainerRow2">&#160;</td>
        <td >&#160;</td>
        <td width="40" class="tableContainerRow2">&#160;</td>
        <td  width="5">:</td>
        <td width="40" class="tableContainerRow2">&#160;</td>        
        <td >&#160;</td>
    </tr>
</table>

どのように解決するのですか?

テーブルは、高さを固定し、テキストを折り返さないという点で、(少なくとも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>

このように div の高さは含まれるセルの高さであり、テキストは div を大きくすることはできず、ウィンドウサイズに関係なく、セルや行の高さは同じままです。