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