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

정보공유

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

 

 

<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 436건 3 페이지
번호 제목 글쓴이 날짜 조회
406 Proxy 서버나 로드밸런서 등에서는 HTTPS 접속시 HTTP_X_FORWARDED_PROTO 로 체크해야 하는 경우 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-21 5060
405 .htaccess파일의 rewriterule 설정 http > https 처리 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 02-16 5493
404 날짜 구하기 계산식. 1월 31일은 3월3일로 계산되는 문제 해결. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 02-03 5181
403 전세계 국문 영문 국가명 국제전화번호 및 코드 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-22 6423
402 조건이 일치 하는 것은 앞으로 정렬하고 랜덤으로 출력하기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-21 6030
401 휴대폰 번호 여부 체크 확인 함수 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-21 6503
400 예약업 플러그인 이니시스 결제모듈 설치 안내 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 09-03 8004
399 예약업 플러그인 KCP 결제모듈 설치 안내 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 09-03 7527
398 jquery fullcalendar eventOrder 정렬 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-23 11100
397 [2021 최신 CSS 6] position:sticky 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-02 7305
396 [2021 최신 CSS 5] aspect-ratio 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-02 7157
395 [2021 최신 CSS 4] Flex Box Gap 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-02 7099
394 [2021 최신 CSS 3] 브라우저 지원여부 확인 @supports 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-02 6837
393 [2021 최신 CSS 2] 1줄로 정리 :is 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-02 7086
392 [2021 최신 CSS 1] 앱처럼 스크롤을 적용하자 scroll-snap 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-02 7402