td row마다 width 다르게 하기
본문
안녕하세요
row마다 넓이를<td>넓이를 다르게 하고 싶습니다.
colspan 으로 억지로 할수는 있는데
너무 번거로워서
td width를 다르게 하려고 하는데 잘 되지 않습니다.
<table>
<tr>
<td style="width : 20px;"></td>
<td style="width : 80px;"></td>
</tr>
<tr>
<td style="width : 30px;"></td>
<td style="width : 70px;"></td>
</tr>
</table>
이런식으로요
혹시 방법이 있을까요?
답변 1
table, tr, td 태그기반 자체로는 힘든것 같고
아래처럼 ul, li 태그기반으로 하는 방법도 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>title</title>
<style type="text/css">
.tbl { background-color: #eee; }
.tbl, .tbl ul { display: table; margin: 0; padding: 0; list-style-type: none; border-collapse: collapse; }
.tbl > li { display: table-row; }
.tbl > li > ul { margin-top: -1px; }
.tbl > li > ul > li { display: table-cell; border: 1px solid #000; }
</style>
</head>
<body>
<ul class="tbl">
<li>
<ul>
<li style="width: 110px;">1</li>
<li style="width: 110px;">2</li>
<li style="width: 200px;">3</li>
</ul>
</li>
<li>
<ul>
<li style="width: 120px;">1</li>
<li style="width: 140px;">2</li>
<li style="width: 160px;">3</li>
<li style="width: 200px;">exceptional column</li>
</ul>
</li>
<li>
<ul>
<li style="width: 130px;">1</li>
<li style="width: 160px;">2</li>
<li style="width: 130px;">3</li>
</ul>
</li>
</ul>
</body>
</html>
감사합니다.
답변을 작성하시기 전에 로그인 해주세요.
