table에서 말줄임표+밑줄 처리하기

<tr>

  <td><span class="category">공지</span></td>

  <td class="l"><a href="#" class="title">제목은 한 줄에 최대한 길게 표현 넘을 경우 제목은제목은 한 줄에 최대한 길게 표현 넘을 경우 제목은제목은 한 줄에 최대한 길게 표현 넘을 경우 제목은</a></td>

  <td>작성자는최대열글자만</td>

  <td>2019.10.08</td>

</tr>

 

<style>

.table-wrap table {table-layout: fixed;}

.table-wrap table td .title {position: relative; max-width: 100%; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow: hidden; vertical-align: -4px;}

.table-wrap table td .title:hover:after {content: ''; position: absolute; width: 100%; height: 1px; bottom: 0; left: 0; background: #555;}
.table-wrap table {table-layout: fixed;}
.table-wrap table td .title {position: relative; max-width: 100%; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow: hidden; vertical-align: -4px;}
.table-rap table td .title:hover:after {content: ''; position: absolute; width: 100%; height: 1px; bottom: 0; left: 0; background: #555;}

</style>