More than 5 years have passed since last update.

DataTablesにおけるTD要素のellipsisについて

Last updated at 2019-08-02Posted at 2019-08-02

これは何？

これを

こんな風にしたいんですよ。

本家的にはコレっぽい。でもコレだと文字数依存になるので今回は違う。
https://datatables.net/blog/2016-02-26

こっちはヒントになりそうだなぁ。
https://codeday.me/jp/qa/20190101/101577.html

まずは必要な列にclass属性付けて…

JavaScript

$('table').DataTable({
  columnDefs: [
    { targets: [6, 7, 8], className: 'ellipsis' }
  ]
});

そのclassにCSSを設定すれば…

CSS

td.ellipsis {
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 10rem;
}

できた。

もうググりたくない。