table 태그에서 텍스트가 넘어갈 경우

> 이슈

table 요소와 overflow 속성의 공존은 불가능하다.

예시로 display: table/table-cell 등 너비값을 가진 table 요소에 overflow 속성을 선언하면 먹히지 않는 현상.

 

tailwind CSS에서 truncate에 해당하는 옵션(overflow / text-overflow / white-space)을

td에 적용해도 해결이 안됐지만, table태그에 옵션을 추가하여 해결하였다!

 

> 해결

table {
  table-layout: fixed; // 👍
  border-collapse: separate; // 👍

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