div로 table 만들기
구피아
2017-02-12 (일) 21:54
5년전
신고
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로 구현하는 것이 어렵네요. |