반응형 테이블

2017. 12. 4. 15:40·DEV/CSS
#html

<table class="mt">
    <thead>
        <tr>
	    <td>이름</td>
	</tr>		
    </thead>
    <tbody>
        <tr>
            <td data-label="이름">반응형</td>
        </tr>
    </tbody>        
</table>
#css

@media all and (max-width: 768px){
	.mt thead{display: none;}
	.mt tbody tr td{display: block;} /*  한 줄  */
	/* .mt tbody tr td{display: inline-block; width: 50%;} */ /* 여러 줄 */
	.mt tbody tr td:before {
	    content: attr(data-label);
	    float: left;
	    font-weight: bold;
	    text-transform: uppercase;
	}
}

https://codepen.io/anon/pen/dZrozW

저작자표시 비영리 변경금지 (새창열림)

'DEV > CSS' 카테고리의 다른 글

크롬 모바일 터치시 파란색 배경 제거  (0) 2021.10.07
scrollbar 숨기기 (기능은 유지)  (0) 2021.04.03
선택 동작 없애기  (0) 2017.11.22
HTML 색상표  (0) 2017.10.27
checkbox switch ios  (0) 2017.10.24
'DEV/CSS' 카테고리의 다른 글
  • 크롬 모바일 터치시 파란색 배경 제거
  • scrollbar 숨기기 (기능은 유지)
  • 선택 동작 없애기
  • HTML 색상표
modric
modric
  • modric
    dev log
    modric
  • 전체
    오늘
    어제
    • 분류 전체보기 (70)
      • DEV (58)
        • Linux (12)
        • JavaScript (5)
        • PHP (4)
        • MySql (4)
        • HTML (7)
        • CSS (9)
        • Spring (13)
        • flutter (1)
        • 오류 (2)
        • devOps (1)
      • 기타 (5)
      • 트렌드 (1)
  • 블로그 메뉴

    • 홈
    • 태그
    • 미디어로그
    • 위치로그
    • 방명록
    • HTML
    • CSS
    • PHP
    • JavaScript
    • Spring
    • Linux
  • 링크

    • 공부하는 소담아빠
    • 타올이
  • 공지사항

  • 인기 글

  • 태그

    제거
    MYSQL
    lastinsertid
    터치
    js
    테두리
    100!
    centos7
    크롬
    build
    iframe
    Safari
    factorial
    php
    centos 7
    linux
    컴파일
    exist
    mariadb10
    update
    클릭
    height
    ios
    팩토리얼
    파란색
    mariadb 10
    넘침
    Destination
    메타버스
    Android
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.5
modric
반응형 테이블
상단으로

티스토리툴바