table の td で、text-overflow: ellipsis

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 で幅を指定すると想定どおりになる。

定義したかったＣＳＳは、以下のようになる。

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 両方指定する必要がある。