かなり前にも、長い文章を省略して「…」に置き換える、という記事をいくつか投稿しましたが、今回はそれを 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 は下記のようなものを用意しました。
1 2 3 4 5 | <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 はこちら。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 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> 内の文字を省略表示する方法でした。
ご参考になれば幸いです。
