【CSS】table内で長い文章の文末を省略して「…」を表示する

かなり前にも、長い文章を省略して「…」に置き換える、という記事をいくつか投稿しましたが、今回はそれを HTML の <table> で実装する方法についてです。
<table> 内で行う場合だと、text-overflow: ellipsis; と white-space: nowrap; を追加するだけではダメなんですね…！

table内でtext-overflow ellipsisを使う | cly7796.net
http://cly7796.net/wp/css/use-text-overflow-ellipsis-in-table/

では、早速サンプルコードです。
まずは、HTML は下記のようなものを用意しました。

<table>
    <tr><th id="th-id">ID</th><th id="th-name">名前</th></tr>
    <tr><td>1</td><td class="td-name">田中 太郎</td></tr>
    <tr><td>2</td><td class="td-name">じゅげむ　じゅげむ　ごこうのすりきれ かいじゃりすいぎょの　すいぎょうまつ  うんらいまつ　ふうらいまつ  くうねるところに　すむところ  やぶらこうじの　ぶらこうじ  パイポパイポ  パイポのシューリンガン  シューリンガンのグーリンダイ  グーリンダイのポンポコピーのポンポコナーの  ちょうきゅうめいのちょうすけ</td></tr>
</table>

長い文章が思い浮かばなかったので、とりあえず寿限無を…。

こちらの HTML は、CSS を何も適用しない状態だと、寿限無の欄は複数行に折り返されて表示されます。
今回は、この寿限無の欄を 1行で表示させ、尚且つ枠からはみ出した分は「…」で省略表示させます。

適用する CSS はこちら。

table {
  table-layout: fixed;
  width: 100%;
}
th#th-id {
  width: 20%;
}
th#th-name {
  width: 80%;
}
td.td-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

文字を折り返して表示させたい <th> には、通常の文字省略でも使用する overflow: hidden;、text-overflow: ellipsis;、white-space: nowrap; を追加します。
上記のコードでは、12〜14行目です。
が、これを追加しただけでは、文字省略の表示は適応されません。
正しくは、1行表示にはなるけれど、文字は省略されず、<table> が横に伸びてしまいます。

なので、 <table> に、table-layout: fixed; と width: 100%; を追加します。
上記では 2〜3行目で記述している部分です。
こちらを追加することで、文字の省略が有効になります。

ただし、table-layout: fixed; を追加すると、ID と名前の枠の横幅が一緒になってしまうので、それぞれに width で横幅を指定しました。
もちろん、こちらは任意の値を設定してもらって問題ありません。

追加するのは以上です！
サンプルコードからも分かる通り、<table> 内で文字の省略表示を行う時には、text-overflow と white-space だけでは実現できませんので、ご注意ください。
でも、追加する CSS はそこまで多くもなく複雑でもないので、そこまで苦労することはないかと思います。

以上、CSS で <table> 内の文字を省略表示する方法でした。
ご参考になれば幸いです。