반응형 table 제목 길 때, '...' 표기

반응형 table을 구현 할  때, 제목의 넓이가 자동 조절 됨에 따라 레이아웃 깨짐 현상 처리

제목이 길 때, '...' 표기

결과

처리방법

<style>
    th, td {border : 1px solid #000}
</style>
<table style="width: 100%; border-collapse: collapse; table-layout: fixed;">
    <caption>반응형 테이블 '...' 처리</caption>
    <colgroup>
        <col style="width:50px">
        <col>
        <col style="width:90px">
    </colgroup>
    <thead>
    <tr>
        <th>등록자</th>
        <th>제목</th>
        <th>등록일</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>홍길동</td>
        <td style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">제목이 너무 길어서, 테이블 레이아웃이 깨져요. 어떻게하면 '...' 으로 표시 하여 테이블 레이아웃 깨짐을 방지 할 수 있을까요? 알려주세요.</td>
        <td>2021-05-01</td>
    </tr>
    </tbody>
</table>