인터넷

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로 구현하는 것이 어렵네요.

댓글목록

등록된 댓글이 없습니다.

모바일 버전으로 보기