「CSS」table-layout テーブル列幅のauto設定を指定

2014年6月20日2021年10月4日

書式
table-layout: auto;
既定値で、ほとんどのブラウザーが表の自動レイアウトアルゴリズムを使用します。表とセルの幅は中身に合うように調整されます。

使用例

<style>
table {
 /*テーブルのセル内に入力された文字が全て表示*/
  table-layout: auto;
  width: 120px;
  border: 1px solid red;
}
td {
  border: 1px solid blue;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
<table>
  <tr><td>AA</td><td>11002222</td></tr>
  <tr><td>BB</td><td>22113333</td></tr>
  <tr><td>Cc</td><td>332212222</td></tr>
  <tr><td>Dd</td><td>445522222</td></tr>
</table>