table이 왜 안될까요? ㅜ
본문
<table>
<tbody>
<tr>
<th scope="row">15 - 16</th>
<td rowspan="3">3줄</td>
<td rowspan="4">내용내용</td>
<td rowspan="2">내용내용</td>
<td rowspan="2">내용내용</td>
</tr>
<tr>
<th scope="row">16 - 17</th>
</tr>
<tr>
<th scope="row" rowspan="2">17 - 18</th>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
이렇게 넣으면 왜
17-18 다음 <tr>이 다음줄로 나오지 않고 17-18줄에 같이 묶이는거 왜그런건가요?
제발 도와주세요,,,,,,,,,,,,,,,,,,,
답변 4
안되는 이유는 마지막 셀이 물리적으로 rowspan 할 공간이 없기 때문입니다.
아래 코드를 보세요
<style>
table {
border-collapse: collapse;
width: 100%;
max-width: 600px;
}
td {
border: 1px solid #000;
padding: 10px;
text-align: center;
height: 40px;
}
</style>
<table>
<tr>
<td>1</td>
<td rowspan="3">2</td>
<td rowspan="4">3</td>
<td rowspan="2">4</td>
<td rowspan="2">5</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">4</td>
<td>8</td>
</tr>
<tr>
<td>2</td>
<td>9</td>
</tr>
</table>
위 코드를 보면 이렇습니다.
여기서 8 에 rowspan="2" 를 주고 9 를 삭제하면 되겠네?
라고 생각할수 있겠지만
그렇게 하면
이렇게 되죠. table 구조는 row 기반으로 짜여지는데
현재 구조상 물리적으로 3개 이상의 열이 존재하지 않기 때문에 4번째 열이 들어갈 공간이 없습니다.
rowspan 은 열이 없다면 그 임계값 이상은 무시해버리는 특성이 있습니다.
그래서 5개의 행을 사용하지만 가상의 6번째 행을 추가해줘야 합니다.
<style>
table {
border-collapse: collapse;
width: 100%;
max-width: 600px;
}
td {
border: 1px solid #000;
padding: 10px;
text-align: center;
height: 40px;
}
</style>
<table>
<tr>
<td>1</td>
<td rowspan="3">2</td>
<td rowspan="4">3</td>
<td rowspan="2">4</td>
<td rowspan="2">5</td>
<td style="border:0px;width:0px;"></td>
</tr>
<tr>
<td>1</td>
<td style="border:0px;width:0px;"></td>
</tr>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">4</td>
<td rowspan="2">8</td>
<td style="border:0px;width:0px;"></td>
</tr>
<tr>
<td>2</td>
<td style="border:0px;width:0px;"></td>
</tr>
</table>
이렇게요.
마지막 6번째 행은 보여지면 안되므로 border 값과 너비를 없앴습니다.
자세한 설명과 답변 감사합니다!!!!!!!!!!!!!!!
더미 셀 추가 방식
다음 코드가 도움이 될지 모르겠습니다.
<style>
table {
border-collapse: collapse;
border-spacing: 0;
}
table th, table td {
border: 1px solid #ccc;
}
hr {
margin: 2em 0;
}
table.tbl-tr-h tr {
height: 1.2em;
}
</style>
<table>
<tbody>
<tr>
<th scope="row">15 - 16</th>
<td rowspan="3">3줄</td>
<td rowspan="4">내용내용</td>
<td rowspan="2">내용내용</td>
<td rowspan="2">내용내용</td>
</tr>
<tr>
<th scope="row">16 - 17</th>
</tr>
<tr>
<th scope="row" rowspan="2">17 - 18</th>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
<hr>
<table class="tbl-tr-h">
<tbody>
<tr>
<th scope="row">15 - 16</th>
<td rowspan="3">3줄</td>
<td rowspan="4">내용내용</td>
<td rowspan="2">내용내용</td>
<td rowspan="2">내용내용</td>
</tr>
<tr>
<th scope="row">16 - 17</th>
</tr>
<tr>
<th scope="row" rowspan="2">17 - 18</th>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
이렇게도 해봤는데 안되더라구요ㅜㅜ
tr 높이 지정 방식
<table border="1">
<tbody>
<tr>
<th scope="row">15 - 16</th>
<td rowspan="3">3줄</td>
<td rowspan="4">내용내용</td>
<td rowspan="2">내용내용</td>
<td rowspan="2">내용내용</td>
</tr>
<tr>
<th scope="row">16 - 17</th>
</tr>
<tr>
<th scope="row">17 - 18</th>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<th scope="row">18 - 19</th>
<td> </td>
</tr>
</tbody>
</table>
| 15 - 16 | 3줄 | 내용내용 | 내용내용 | 내용내용 |
|---|---|---|---|---|
| 16 - 17 | ||||
| 17 - 18 | ||||
| 18 - 19 |
맨 마지막 줄은 3줄이라고 적힌 칸 바로 아래에 단독으로 나와야하는 칸이에요ㅠㅠ 18-19칸은 그 아래에 있고요
그림판으로 그려서 첨부하시면 고수님들 한번에 알아보실 듯 해요.
엑셀로 구현해봤습니다.
이렇게 나와야하는데 도통 구현이 안돼서요 ㅠㅠ
답변을 작성하시기 전에 로그인 해주세요.
