CSSでテーブルからはみ出した部分を省略する

実装例

テーブルからはみ出た部分を…で省略する方法です。

See the Pen BazOmeY by yamazaki (@y_m_z_k) on CodePen.

詳細

HTMLは省略しますが、CSSの必要な部分だけ抜き出すとこのようになります。

.my-table {
    width: 500px;
    table-layout: fixed;
}

.my-table * {
    width:100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

手順

CSSで以下の2つの手順を適用する必要があります。

1. まずはテーブルの横幅を固定します。
2. 次にテーブルの幅からはみ出した部分を省略します。

1.テーブルの横幅を固定

テーブルの横幅を500pxに固定してセルの横幅を100pxに固定しています。
この時table-layout: fixed;も設定しないと固定されないので注意が必要です。

2.テーブルの幅からはみ出した部分を省略

固定したらセルの幅より文字が長い場合にセルから突き抜けてしまうので、
突き抜けた部分を非表示にして省略記号をつけます。
主にCSSのこの部分です。

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

最後に

こちらの記事でもう少し細かく説明しているので、気になった方はぜひ見に来てください！
https://masa-enjoy.com/css-table-design