위토즈 - 개발자프로그램판매공간

정보공유

[퍼블리싱] 반응형 테이블 만들기.

 

 

<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>




정보공유
Total 0건 1 페이지
번호 제목 글쓴이 날짜 조회
게시물이 없습니다.