table이 왜 안될까요? ㅜ 채택완료
</p>
<p><table></p>
<p> <tbody></p>
<p> <tr></p>
<p> <th scope="row">15 - 16</th></p>
<p> <td rowspan="3">3줄</td></p>
<p> <td rowspan="4">내용내용</td></p>
<p> <td rowspan="2">내용내용</td></p>
<p> <td rowspan="2">내용내용</td></p>
<p> </tr></p>
<p> <tr></p>
<p> <th scope="row">16 - 17</th></p>
<p> </tr></p>
<p> <tr></p>
<p> <th scope="row" rowspan="2">17 - 18</th></p>
<p> <td rowspan="2"> </td></p>
<p> <td rowspan="2"> </td></p>
<p> </tr></p>
<p> <tr></p>
<p> <td> </td></p>
<p> </tr></p>
<p> </tbody></p>
<p></table></p>
<p>
이렇게 넣으면 왜
17-18 다음 <tr>이 다음줄로 나오지 않고 17-18줄에 같이 묶이는거 왜그런건가요?
제발 도와주세요,,,,,,,,,,,,,,,,,,,
답변 4개
안되는 이유는 마지막 셀이 물리적으로 rowspan 할 공간이 없기 때문입니다.
아래 코드를 보세요
</p>
<p>
<style>
table {
border-collapse: collapse;
width: 100%;
max-width: 600px;
}</p>
<p>td {
border: 1px solid #000;
padding: 10px;
text-align: center;
height: 40px;
}</p>
<p>
</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></p>
<p>
위 코드를 보면 이렇습니다.
여기서 8 에 rowspan="2" 를 주고 9 를 삭제하면 되겠네?
라고 생각할수 있겠지만
그렇게 하면
이렇게 되죠. table 구조는 row 기반으로 짜여지는데
현재 구조상 물리적으로 3개 이상의 열이 존재하지 않기 때문에 4번째 열이 들어갈 공간이 없습니다.
rowspan 은 열이 없다면 그 임계값 이상은 무시해버리는 특성이 있습니다.
그래서 5개의 행을 사용하지만 가상의 6번째 행을 추가해줘야 합니다.
</p>
<p>
<style>
table {
border-collapse: collapse;
width: 100%;
max-width: 600px;
}</p>
<p>td {
border: 1px solid #000;
padding: 10px;
text-align: center;
height: 40px;
}</p>
<p>
</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></p>
<p>
이렇게요.
마지막 6번째 행은 보여지면 안되므로 border 값과 너비를 없앴습니다.
답변에 대한 댓글 2개
댓글을 작성하려면 로그인이 필요합니다.
다음 코드가 도움이 될지 모르겠습니다.
</p>
<p><style>
table {
border-collapse: collapse;
border-spacing: 0;
}
table th, table td {
border: 1px solid #ccc;
}</p>
<p>hr {
margin: 2em 0;
}</p>
<p>
table.tbl-tr-h tr {
height: 1.2em;
}
</style></p>
<p> </p>
<p><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></p>
<p> </p>
<p><hr></p>
<p> </p>
<p><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></p>
<p>답변에 대한 댓글 2개
댓글을 작성하려면 로그인이 필요합니다.
</strong></p>
<p><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></p>
<p><strong>
| 15 - 16 | 3줄 | 내용내용 | 내용내용 | 내용내용 |
|---|---|---|---|---|
| 16 - 17 | ||||
| 17 - 18 | ||||
| 18 - 19 |
답변에 대한 댓글 2개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인