CSS テーブルのセルで入りきらない文字列をカットして表示する
CSSでテーブルのセルで入りきらない文字列をカットして表示する方法を紹介します。
以下のようなtableのとき、tdの要素に対して以下のようにスタイルを設定します。
<table border="1">
<col style="width: 200px;">
<col style="width: 200px;">
<tbody>
<tr>
<td>
あいうえおかきくけこさしすせそたちつてと
</td>
<td style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 0;">
あいうえおかきくけこさしすせそたちつてと
</td>
</tr>
</tbody>
</table>white-space: nowrapで、テキストを折り返さないように設定します。
overflow: hiddenで、はみ出たテキストを非表示にします。
text-overflow: ellipsisで、表示領域に入り切らない部分を非表示にして...にします。
tdに対して設定する場合はさらに、max-widthに0を指定する必要があります。
td {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: 0;
}