반응형 테이블 만들기. > 정보공유

본문 바로가기

쇼핑몰 검색

위토즈소프트 로그인

회원가입 회원가입  아이디/비밀번호찾기 아이디/비밀번호찾기

정보공유 목록

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

페이지 정보

작성자 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일18-09-01 16:03 조회9,811 회 댓글0 건

본문

 

 

<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 34건 1 페이지
정보공유 목록
번호 제목 글쓴이 날짜 조회
34 퍼블리싱 웹페이지 인쇄할때 페이지 구분하는 style 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-20 1065
33 퍼블리싱 페이지가 이유도 없이 중간에 리로딩 되는 문제 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-05 2405
32 퍼블리싱 전체화면 배경이미지 깔기. 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-07 3636
31 퍼블리싱 깜빡이는 버튼 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 06-05 7445
30 퍼블리싱 부트스트랩 form control input box 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-17 5675
29 퍼블리싱 박스 테두리를 따라서 흐르는 효과 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 02-08 7731
28 퍼블리싱 이미지 중앙 가운데 정렬 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-20 9719
27 퍼블리싱 유튜브 동영상 반응형 처리 (리사이징) 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-20 8977
열람중 퍼블리싱 반응형 테이블 만들기. 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 09-01 9812
25 퍼블리싱 ul li 사용하여 셀타입으로 갤러리를 구성했을때 칸이 비는 현상 방지 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-17 9824
24 퍼블리싱 이미지 화면 정중앙 가운데 정렬 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 09-27 15135
23 퍼블리싱 말줄임 처리 css 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 09-02 13160
22 퍼블리싱 html 코드 정리를 90%이상 빠르게 해주는 도구 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 07-07 14997
21 퍼블리싱 2단 레이아웃 만들기. 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 06-22 12981
20 퍼블리싱 반응형 테이블 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-15 16517
게시물 검색