1. ホーム
  2. html

[解決済み] テーブルの列幅を、セル内のテキスト量に関係なく一定にする?

2022-03-16 14:26:44

質問

テーブルの中で、ある列の最初のセルの幅を 100px .
しかし、この列のセルの1つのテキストが長すぎる場合、列の幅が 100px . どうすればこの拡張を無効にできますか?

解決方法は?

なかなか分からなくて少し遊んでしまいました。

セルの幅を設定する必要があります。 th または td を設定し、さらに table-layout から fixed . なぜか、テーブルの幅も設定されている場合のみ、セルの幅が固定されるようです(ばかばかしいと思いますが、まあいいや)。

また overflow プロパティを hidden を使用して、テーブルから余分なテキストが出てこないようにします。

縁取りやサイズ調整もすべてCSSに任せるようにしたほうがいい。

OK、ではこうしましょう。

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 200px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
  overflow: hidden;
}
<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

JSFiddleではこうです。

この人も同じような問題を抱えていました。 テーブルセルの幅 - 幅の固定、長い単語の折り返し/切り捨て