div로 table 만들기
페이지 정보
작성자 구피아 작성일17-02-12 21:54 조회4,703회 댓글0건관련링크
본문
table 요소를 div로 구현해 보자.
table 요소를 div의 class 속성 중 display 값으로 지정해 줍니다.
table 요소 / div display값
<table> / table
<tbody> / table-row-group
<thead> / table-header-group
<tfoot> / table-footer-group
<caption> / table-caption
<tr> / table-row
<td>, <th> / table-cell
<colgroup> / table-column-group
<col> / table-column
IE의 경우 8 이상에서 지원합니다.
예를 들자면 아래와 같이 적용합니다.
<div class="divTable"> // <table>
<div class="divTableBody"> // <tbody>
<div class="divTableRow"> // <tr>
<div class="divTableCell"></div> // <td></td>
<div class="divTableCell"></div> // <td></td>
</div> // </tr>
<div class="divTableRow"> // <tr>
<div class="divTableCell"></div> // <td></td>
<div class="divTableCell"></div> // <td></td>
</div> // </tr>
</div> // </tbody>
</div> // </table>
CSS는 다음과 같이 적용됩니다.
.divTable {display:table}
.divTableBody {display:table-row-group}
.divTableRow {display:table-row}
.divTableCell {display:table-cell}
흠.. 아직 모르는 게 많아서 그런지 colspan과 rowspan은 div로 구현하는 것이 어렵네요.
댓글목록
등록된 댓글이 없습니다.