1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-11-07

実装例

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

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?