TableのTd内でテキストを”…”に省略

結局はTdにDivを入れ込んだ方が楽な気がする。

通常のやり方

TdにDivやPタグを挟む

Td{
  Width: 100px;
}

Td div{
  Overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Td内を直接省略する場合

Tableタグの幅を指定し、Table-layout: fixed; を追加する。

Table{
  table-layout: fixed;
  width: 80%;
}

table td {
  Overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

TdやThが同じ幅になってしまって困る場合

該当のTd・Thタグに幅指定を追加する

Table {
  Table-layout: fixed;
  width: 80%;
}

Th {
  Width: 20%;
}

Td {
  Overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}