css

최소 CSS로 반응형 테이블 만들기

조회 658 (작성일 2019.10.29 19:44)
- 음성
- 목록

반응 형 테이블 레이아웃을 만들어야 할 필요성이 대부분의 개발자가 기대하는 것보다 훨씬 자주 나타납니다.

직감 반응은 일종의 커스텀 그리드 시스템을 구현하거나 사전 빌드 된 라이브러리를 가져 오는 것일 수 있습니다.

이 작업을 수행하지 마십시오. 테이블과 간단한 CSS만 사용하십시오.

최근의 기사인 Write HTML Like Its 's 1999는 HackerNews에서 예상했던 것보다 훨씬 많은 관심을 받았습니다.

이 관심에 따라 테이블 요소가 휴대 기기에서 잘 작동하지 않거나 작은 화면에서 사용 가능한 레이아웃을 사용할 수 없다는 점에 대해 몇 가지 의견이 있었습니다. 이것은 사실이 아닙니다.

https://uglyduck.ca/responsive-tables/

아래에는 최소한의 CSS만 사용하여 모바일 장치용 테이블 HTML을 최적화 하는 방법을 보여주는 두 개의 개별 데모가 포함되어 있습니다. 이러한 구현은 완벽하지는 않지만 테이블처럼 보이도록 많은 커스텀 div 요소를 주입하는 것보다 훨씬 우수합니다.

데모 1 : 그냥 스크롤하자

알겠습니다,이 구현이 가장 크지는 않지만 거대한 데이터 세트에서 잘 작동한다는 것을 알았습니다. 부모 테이블 요소에 최소 너비를 설정하면 브라우저에서 사용자가 내용을 가로로 스크롤 하기만 하면 됩니다.

table {
    min-width: 800px; /* Set your desired min-width here */
}

https://codepen.io/bradleytaunt/pen/ewObbW

실제로는 단순성과 기능 때문에 이 방법을 선호합니다. 모바일 사용자는 스크롤이 가장 기본적인 작업 중 하나이므로 스크롤에 익숙합니다. "잘라 내기"테이블을 보면 컨텐츠를 스크롤 할 수 있는 즉각적인 시각적 신호를 얻을 수 있습니다.

데모 2 : 생각보다 유연

더 작은 테이블 데이터 세트로 작업 할 때 flexbox와 같은 것을 사용하는 것이 더 효과적입니다. 대상 모바일 화면 크기에 약간의 flexbox 레이아웃을 추가하기 만하면 됩니다.

/* Using 800px as mobile screen in this example */
@media(max-width: 800px) {
    /* Hide the table headings */
    table thead {
        left: -9999px;
        position: absolute;
        visibility: hidden;
    }
    table tr {
        border-bottom: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 40px;
    }
    table td {
        border: 1px solid;
        margin: 0 -1px -1px 0; /* Removes double-borders */
        width: 50%;
    }
}

https://codepen.io/bradleytaunt/pen/mZbvOb

이 방법에는 몇 가지 주의 사항이 있습니다.

현재 모바일 보기에서 thead 행을 숨깁니다 (시각적으로만 화면 판독기만 스캔할 수 있음)
flexbox 행당 몇 개의 항목이 의미가 있는지에 따라 더 많은 사용자 정의 작업이 필요할 수 있습니다 (프로젝트 및 데이터 세트를 기반으로 함)

테이블 제목을 유지하고 tbody 내용과 동일하게 스타일을 지정할 수 있지만 숨기는 것이 더 깨끗합니다. 그 선택은 전적으로 개인 취향에 달려 있습니다. 다음과 같이 기본 tbody 요소 내에 제목 범위 요소를 추가 할 수도 있습니다.

/* Default span styling - hidden on desktop */
table td span {
    background: #eee;
    color: dimgrey;
    display: none;
    font-size: 10px;
    font-weight: bold;
    padding: 5px;
    position: absolute;
    text-transform: uppercase;
    top: 0;
    left: 0;
}

/* Simple CSS for flexbox table on mobile */
@media(max-width: 800px) {
    table thead {
        left: -9999px;
        position: absolute;
        visibility: hidden;
    }
    table tr {
        border-bottom: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 40px;
    }
    table td {
        border: 1px solid;
        margin: 0 -1px -1px 0;
        padding-top: 35px; /* additional padding to avoid heading overlap */
        position: relative;
        width: 50%;
    }
    /* Show the heading span */
    table td span {
        display: block;
    }
}