table の td で、text-overflow: ellipsis を有効にする方法を調べると、
よく、table の属性に、table-layout: fixed を指定して
td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px; // ←幅を指定
}
というのがよくネットで紹介されているが、現在の chrome では効かない。
table-layout: fixed を使わずに、td に display: inline-block も指定するという方法、
これは成功するが、table 属性に、border-collapse: collapse を使えなく
border-collapse は、sepatate になってしまう。
では、どうするか?
table-layout: fixed を使い、width ではなく、max-width で幅を指定すると想定どおりになる。
定義したかったCSSは、以下のようになる。
table.list {
border-spacing: 0;
border-collapse: collapse;
table-layout: fixed;
}
.list td, .list th{
border: 1px solid #000000;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.list-detail td:nth-child(1){ max-width: 100px; width: 100px; }
.list-detail td:nth-child(2){ max-width: 100px; width: 100px; }
.list-detail th:nth-child(3){ max-width: 150px; width: 150px; }
max-width と width 両方指定する必要がある。