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

정보공유

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

 

 

<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 45건 1 페이지
번호 제목 글쓴이 날짜 조회
45 CSS를 사용하여 4x4 형태의 갤러리 디자인 그리드 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-05 231
44 html 로 된 svg 태그를 png 파일로 만들기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-08 840
43 css 가로폭 일정비율로 칸 만들기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-18 2482
42 부트스트랩 모달창 제어 관련 스크립트. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-29 2874
41 [2021 최신 CSS 6] position:sticky 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-02 7313
40 [2021 최신 CSS 5] aspect-ratio 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-02 7169
39 [2021 최신 CSS 4] Flex Box Gap 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-02 7104
38 [2021 최신 CSS 3] 브라우저 지원여부 확인 @supports 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-02 6841
37 [2021 최신 CSS 2] 1줄로 정리 :is 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-02 7093
36 [2021 최신 CSS 1] 앱처럼 스크롤을 적용하자 scroll-snap 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-02 7406
35 웹페이지 인쇄할때 하단에 주소 안나오도록 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 06-22 7785
34 웹페이지 인쇄할때 페이지 구분하는 style 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-20 8111
33 페이지가 이유도 없이 중간에 리로딩 되는 문제 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-05 14582
32 전체화면 배경이미지 깔기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-07 14568
31 깜빡이는 버튼 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 06-05 21246