[HTML_CSS] table에 유연한 ellipsis 적용하기

안녕하세요 :)

포스팅을 올릴 때마다 저의 밑바닥을 보이는 것 같아 부끄럽지만... 저랑 같은 어려움을 겪고 계신 분들을 위해 포스팅을 올려봅니다.

 

사실 저는 ellipsis를 적용할 때마다 긴장합니다. ellipsis '...' 표시는 일상에서 자주 접하는 문자 overflow 처리 방식인데 이게 아무렇게 사용한다고 "쨘"하고 적용되지는 않습니다 ㅠㅠ block 요소인지 그리고 너비가 있는지 등 함께 적용되어야 하는 스타일이 있습니다. 자세한 내용은 다른 블로그에 자세히 설명되어 있으니 살펴보시길 바랍니다. 저도 매번 찾아보고 있습니다.

 

오늘은 table 컴포넌트 작업중이었는데요, Saas 웹애플리케이션이다 보니 테이블이 지원해야 하는 기능들이 꽤 많이 있습니다. 그리고 유저 특성상 많은 데이터를 살펴보고 다양한 너비의 화면에서 웹애플리케이션을 사용하는 경우가 많습니다. 따라서 아래 요소들이 고려되어야 했습니다.

 

- table은 100%의 너비를 차지해야 한다.

- title과 body 열은 다른 열보다 너비가 넓어야 한다.

- title과 body 열은 최대한 넓은 범위를 차지하며 overflow된 문자는 ellipsis 처리를 한다.

 

위 디자인을 위해 저는 두 가지 트릭을 이용했습니다.

 

1. colgroup tag를 이용해 각 열의 너비를 "%"로 지정한다.

2. flex의 트릭을 이용해 title과 body cell의 overflow를 ellipsis 처리한다.

---

1. colgroup tag를 이용해 각 열의 너비를 "%"로 지정한다.

<Table>
  <colgroup>
    <col width="2%" />
    <col width="5%" />
    <col width="25%" />
    <col width="45%" />
    <col width="10%" />
    <col width="10%" />
  </colgroup>
  <TableHeader>
    ...table header
  </TableHeader>
  <TableBody>
    ...table body
  </TableBody>
</Table>

 

table과 관련된 태그에 colgroup과 col 태그가 있습니다. 이 태그는 각열의 너비를 지정하고 td에서 colSpan을 지정해 열 통합에 이용할 수 있는 태그입니다. 여기서 저는 title은 전체너비에서 25%를 body 열은 전체너비에서 45%를 차지하도록 colgroup을 설정했습니다.

2. flex의 트릭을 이용해 title과 body cell의 overflow를 ellipsis 처리한다.

위 코드를 넣어도 텍스트 길이가 큰 body 열이 여러 줄을 차지하면서 테이블 데이터를 보기 어려워지는 문제가 발생하게 됩니다. 따라서 ellipsis 처리를 해주어야 하는데 저는 flex 트릭을 이용했습니다.

<div className="flex flex-1">
    <div className="flex-1 w-[1px]">
      <div className="truncate">{row.getValue("body")}</div>
    </div>
  </div>

 

tailwind를 사용했는데요, 총 세개의 div 태그 안에 ellipsis 처리하고자 하는 콘텐츠를 넣으면 됩니다. 두 번째 div에 width 속성에 너비를 넣어주어야 flex-1 값이 제대로 적용되면서 ellipsis 처리가 됩니다. 사실 위 스타일이 정확하게 어떤 원리로 ellipsis 처리되는지 이해하지 못했습니다. 관련해서는 추후 자세히 공부해보려고 합니다. css의 세계는... 정말 심오하네요 ㅜㅠ