多くの人が、コントロールやデータなどのレイアウトにテーブルを使用しています。- その一例が、人気の高いjqGridです。しかし、私には理解できない魔法が起きています(大げさに言えばテーブルです。
jqGridのように、テーブルの列幅を設定して、それに従わせることはできるのでしょうか?これを再現しようとすると、すべての<td style='width: 20px'>
を設定しても、それらのセルの1つのコンテンツが20pxよりも大きいとすぐに、セルが拡張されてしまうのです。
何かアイデアや知見はありませんか?
ただし、<col>
タグで全行のテーブルスタイルを管理するには、table-layout:fixed
スタイルを<table>
またはtables cssクラスに設定し、セルにoverflow
スタイルを設定する必要があります。
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col
<table class="fixed">
<col width="20px" />
<col width="30px" />
<col width="40px" />
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</table>
で、これがあなたのCSSです。
table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }
table {
table-layout:fixed; width:200px;
}
table tr {
height: 20px;
}
10x10