[TIL] 반응형 테이블에서 text-ellipsis 사용하기

반응형 테이블은 cell의 너비가 고정값이 아니기 때문에 width:100%로 하고 text-ellipsis 을 넣어주었지만 overflow-hidden의 기준이 잡히지 않아서인지 적용이 되지 않았다. 

그래서 구글링을 하다가 아주 오래된 2019년도의 글에서 해답을 찾았다!

 

cell: ({ row }: any) => {
        return (
          <p className='block w-[95%] cursor-pointer overflow-hidden text-ellipsis' onClick={() => handleOpenDetailModal(row.original.faq)}>
            {row.original.faq}
          </p>
        );
      },

 

해당 셀에 들어가는 요소를 display: block으로 지정해주고

나머지 말줄임에 필요한 속성 width: 95% (양 사이드에 약간의 여백을 주고 싶었다) ,overflow-hidden, text-ellipsis 를 넣어주면 반응형 테이블에서도 말줄임이 잘 동작한다.