web-dev-qa-db-ja.com

TRの高さを修正するには？

テーブルの行の高さ（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>
htmlhtml-tablerow
93
Amra

テーブルは、高さを固定し、テキストを折り返さないという点では（少なくとも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を大きくすることができず、ウィンドウサイズが何であってもセル/行を同じ高さに保ちます。

91
Andy E

次のように、セルの1つに高さを入れてみてください。

<table class="tableContainer" cellspacing="10px">
 <tr>
  <td style="height:15px;">NHS Number</td>
  <td>&#160;</td>

ただし、コンテンツが必要とするよりもセルを小さくすることはできないことに注意してください。その場合、最初にテキストを小さくする必要があります。

12
poke

tdの高さをnaturalコンテンツの高さ未満に設定する

テーブルセルは少なくともコンテンツを収めるのに十分な大きさを必要とするため、コンテンツに見かけの高さがなければ、セルのサイズを任意に変更できます。

セルのサイズを変更することにより、行の高さを制御できます。

これを行う1つの方法は、absoluteセル内のrelative位置でコンテンツを設定し、セルのheightと、コンテンツのleftおよびtopを設定することです。

table {
    width: 100%;
}
.set-height td {
    position: relative;
    overflow: hidden;
    height: 2em;
}
.set-height p {
    position: absolute;
    margin: .1em;
    left: 0;
    top: 0;
}
<table><tbody>
    <tr class="set-height"><td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td></tr>
    <tr><td>Foo</td></tr>
    <tr><td>Bar</td></tr>
    <tr><td>Baz</td></tr>
    <tr><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td></tr>
</tbody></table>
9
Fred Gandt

Divをtdに入れると、うまくいきました。

<table width="100%">
    <tr><td><div style="font-size:2px; height:2px; vertical-align:middle;">&nbsp;</div></td></tr>
7
user2987600

テーブルの幅は90％で、これはコンテナーの相対値です。

ページを絞ると、おそらく表の幅も絞られます。セルの幅も小さくなり、ブラウザは高さを増やすことで補正します。

高さをそのままにするには、セルの幅が意図したコンテンツを保持できることを確認する必要があります。テーブルの幅を修正することはおそらく試してみたいことです。または、おそらくテーブルの最小幅で遊んでください。

2
o.k.w

私が望んだ結果を得るためにこれをしなければなりませんでした：

<td style="font-size:3px; float:left; height:5px; vertical-align:middle;" colspan="7"><div style="font-size:3px; height:5px; vertical-align:middle;"><b><hr></b></div></td>

セルまたはdivのみでの作業を拒否し、両方が必要でした。

1
Jen