테이블 내부에 말줄임 되는 UI
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {margin:0; padding:0;}
.blind {
overflow: hidden !important;
position: absolute !important;
clip: rect(0 0 0 0) !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
}
</style>
</head>
<body>
<div style="display:flex;">
<a href="#" style="display:block; overflow: hidden;">
<table style="overflow: hidden; white-space: nowrap;">
<tr>
<th scope="row">이미지</th>
<td style="max-width:90px; overflow:hidden; text-overflow: ellipsis;">구단명구단명</td>
<td>
<div style="display:table; width:100%; table-layout: fixed;">
<div style="display:table-cell; overflow:hidden; text-overflow: ellipsis;">선수명 가나다라마바</div>
</div>
</td>
<td>점수</td>
<td rowspan="2">
<div style="display:table; width:100%; table-layout: fixed; text-align:right;">
<div style="display:table-cell; overflow:hidden; text-overflow: ellipsis;">경기장소 가나다라마바</div>
</div>
</td>
</tr>
<tr>
<th scope="row">이미지</th>
<td style="max-width:90px; overflow:hidden; text-overflow: ellipsis;">구단명</td>
<td>
<div style="display:table; width:100%; table-layout: fixed;">
<div style="display:table-cell; overflow:hidden; text-overflow: ellipsis;">선수명 가나다라마바</div>
</div>
</td>
<td>점수</td>
</tr>
</table>
</a>
<div style="width:67px; background-color:#faa; flex-grow:1;">알림</div>
</div>
</body>
</html>