高さをコンテンツの自然なtd高さより低く設定する
表のセルは少なくともそのコンテンツを収めるのに十分な大きさが必要なので、コンテンツに明らかな高さがなければ、セルのサイズを任意に変更できます。
セルのサイズを変更することで、行の高さを制御できます。
これを行う 1 つの方法は、セルabsolute内の位置を使用してコンテンツを設定し、セルのとコンテンツの を設定することです。relativeheightlefttop
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><td> 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>