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

2021年10月4日

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

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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>

 

CSS

Posted by arkgame