セル内のテキストの量に関係なく、表の列幅を一定に設定しますか? 質問する

セル内のテキストの量に関係なく、表の列幅を一定に設定しますか? 質問する

私の表では、列の最初のセルの幅を に設定しています100px
しかし、この列のセルの 1 つにあるテキストが長すぎると、列の幅が を超えてしまいます100px。この拡張を無効にするにはどうすればよいでしょうか。

ベストアンサー1

理解に苦しんだので、しばらく遊んでみました。

セルの幅を設定する必要があります(どちらかth一方がtd機能しました。私は両方設定しました)そしてtable-layoutfixed何らかの理由で、テーブルの幅も設定されている場合にのみセルの幅が固定されるようです (それはばかげていると思いますが、どうでもいいことです) 。

また、余分なテキストがテーブルから出ないようにするには、overflowプロパティを に設定すると便利です。hidden

境界線とサイズ設定もすべて CSS に任せるようにしてください。

さて、私が持っているものは次のとおりです。

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ではこうなります

この男性も同様の問題を抱えていました:表のセル幅 - 幅の固定、長い単語の折り返し/切り捨て

おすすめ記事