- 정보공유
[퍼블리싱] 반응형 테이블 만들기.
<style>
.tbl_bx{position:relative;z-index:10;clear:both;zoom:1}
.tbl_bx table{width:100%;*width:auto;border:1px solid #bfbfbf;border-collapse:collapse;border-spacing:0;table-layout:fixed}
.tbl_bx th{border-right:0;border-top:1px solid #bfbfbf;border-left:1px solid #dcdcdc;border-bottom:1px solid #bfbfbf;font-weight:normal;font-size:11px;color:#777;letter-spacing:-1px;vertical-align:middle}
.tbl_bx td{border:0;border-left:1px solid #e4e4e4;border-bottom:1px solid #e4e4e4;background:#fff;color:#333;text-align:center;}
.tbl_bx tr:first-child td {border-top:1px solid #d2d2d2;}
.tbl_bx th:last-child, .tbl_bx td:last-child {border-right:1px solid #c5c9cd}
@media (max-width: 767px) { /* xs */
.tbl_bx .responsive-table td {display:inline-block;border-left:0;line-height:32px;}
.tbl_bx .responsive-table td:nth-child(odd) {width:25%}
.tbl_bx .responsive-table td:nth-child(2n) {width:75%;clear:both}
.tbl_bx .responsive-table td:nth-child(n+3) {border-top:0;}
.tbl_bx .responsive-table th:last-child, .tbl_bx .responsive-table td:last-child {border-right:0;}
.tbl_bx .responsive-table tr.h130 td {height:130px;padding-top:5px;}
.tbl_bx .responsive-table tr.h200 td {height:200px;padding-top:5px;}
.tbl_bx .responsive-table tr.h400 td {height:400px;padding-top:5px;}
}
</style>
<div class="tbl_bx">
<table cellpadding="0" cellspacing="0" border="0" class="responsive-table">
<tr>
<td>test1</td>
<td>test2</td>
<td>test3</td>
<td>test4</td>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
<td>test3</td>
<td>test4</td>
</tr>
</table>
</div>