개인적으로만든거

테이블 내부에 말줄임 되는 UI

블루윤 2019. 10. 13. 14:38

<!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>