TRの高さを修正する方法？

102

テーブルの行（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>
html  html-table  row 
— アムラ
ソース

回答:

97

高さの固定とテキストの折り返しでは、テーブルは（少なくとも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。ウィンドウのサイズに関係なく、セル/行を同じ高さに保ちます。

— アンディE
ソース
1
アドバイスをありがとう、それはうまくいくようですが、それは少し厄介に見えます。
— Amra
喜んでお手伝いします:-)残念ながら、ハッキングや回避策では通常、厄介なコードが当てはまります。
— Andy E
[code] .container {width：100％;を使用しています。max-height：40px; オーバーフロー：非表示; } [/ code]および[code] <div class = 'container'> </ div> [/ code]。
— Cees Timmerman、2012
同じ方法で<th>タグ内にdivを挿入しましたが、うまくいきました。この問題はChromeでのみ発生しました。FFox、Safari、IEは、テーブルヘッダーに設定された高さを適切にサポートしていました。共有してくれてありがとう！:)
— マリオロドリゲス
サファリでは機能しません... tdだけでなく、divにも実際の高さと幅を設定する必要があります
— Radu Simionescu
15

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

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

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

— ポーク
ソース
1
私はあなたがhtml属性で「px」を使用しないと確信しています。
— unflores
10
私はあなたがスタイル属性で使用できると確信しています。
— Burak Dobur 2016年
11

高さをコンテンツの自然な高さtdより低く設定する

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

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

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

table {
  width: 100%;
}
td {
  border: 1px solid #999;
}
.set-height td {
  position: relative;
  overflow: hidden;
  height: 3em;
}
.set-height p {
  position: absolute;
  margin: 0;
  top: 0;
}
/* table layout fixed */
.layout-fixed {
  table-layout: fixed;
}
/* td width */
.td-width td:first-child {
  width: 33%;
}
<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>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <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>
<h3>With <code>table-layout: fixed</code> applied:</h3>
<table class="layout-fixed"><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>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <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>
<h3>With <code>&lt;td&gt; width</code> applied:</h3>
<table class="td-width"><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>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <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>
スニペットを展開

table-layoutプロパティ

上記のスニペットの2番目のテーブルがtable-layout: fixed適用され、セルの内容に関係なく、親内でセルの幅が等しくなります。

caniuse.comによるとtable-layout、2019年9月12日の時点での使用に関して重大な互換性の問題はありません。

またはwidth、3番目の表のように特定のセルに適用するだけです。

これらのメソッドにより、適用によって作成された実質的にサイズのないコンテンツを含むセルに、position: absolute任意の周囲を与えることができます。

もっと簡単に...

私は本当にこれを最初から考えるべきだった。通常の方法でブロックレベルのテーブルセルのコンテンツを操作できます。また、でコンテンツの本来のサイズを完全に破壊することなくposition: absolute、テーブルから離れて幅を特定できます。

table {
  width: 100%;
}
td {
  border: 1px solid #999;
}
table p {
  margin: 0;
}
.cap-height p {
  max-height: 3em;
  overflow: hidden;
}
<table><tbody>
  <tr class="cap-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>
    <td>Foo</td>
  </tr>
  <tr class="cap-height">
    <td><p>Bar</p></td>
    <td>Baz</td>
  </tr>
  <tr>
    <td>Qux</td>
    <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>
</tbody></table>
スニペットを展開

— フレッド・ガント
ソース
最後に有望に見える答え！仕事に着いたらすぐにやってみて、もし忘れなければフィードバックします。
— jeromej 2015年
1
魅力のように働いた！（text-align: centerただし、削除やその他のセンタリングト​​リックを行うと警告します…依存しているためposition: absolute）
— jeromej
これは私の場合は高さで機能しますが、を使用するpostion: absoluteと、自動セル幅が失われます。行の高さを制御しながら、テーブルがセルの幅を適切に計算する方法を見つけることを試みます。何かご意見は？
— 灰
@ash-コンテンツのサイズを効果的に破棄した後、完全に自動の幅を維持する方法をすぐに考えているわけではありませんが、テーブルセルを任意に広くすることができます。サンプルスニペットを拡張して、役立つ可能性のある1つの方法を示しました。私はそれをもう少し考えて、何か有用なものが頭に浮かんだら詳細を追加します:)
— Fred Gandt
フレッドに感謝します。ヘッダー（<th>）を使用して列に固定サイズを与えることもできますが、ヘッダーが狭すぎたり広すぎたりする可能性があることに注意してください。
— 灰
8

divをtd内に置くと、うまくいきました。 

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

テーブルの幅は、コンテナを基準にして90％です。

ページを圧縮すると、おそらくテーブルの幅も圧縮されます。セルの幅も減少​​し、ブラウザは高さを増加させることで補正します。

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

— わかった
ソース
1

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

<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のみでの作業は拒否され、両方が必要でした。

— ジェン
ソース
-5

これは、単語が折り返されて新しい行に進んでいるため、TRが伸びているためです。これで問題が解決するはずです。

overflow:hidden;

それをTRスタイルに入れます

PS。私はそれをテストしていませんので、XDを嫌いにしないでください

— オジー
ソース
3
嫌いではありませんが、msdn.microsoft.com / en-us / library / ms535911（VS.85）.aspxにIEのTD要素でサポートされているスタイルのリストがあります。overflowそれらの1つではありません。
— Andy E
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.