정보실

웹학교

정보실

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

본문

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

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

이 작업을 수행하지 마십시오. 테이블과 간단한 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 


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

  1. 현재 모바일 보기에서 thead 행을 숨깁니다 (시각적으로만 화면 판독기만 스캔할 수 있음)
  2. 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;
    }
}


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


업데이트 : 사용자 mmoez가 지적한 것처럼 : nth-child pseudo selectors를 사용하여 모바일에서 제목 필드를 구현하는 것이 훨씬 덜 반복적입니다 (이 CSS-Tricks 기사에 요약되어 있음).


왜 테이블 요소를 사용해야 합니까? 


간단히 말해 : 접근성과 적절한 의미론.


망치가 필요할 때 왜 드라이버를 사용합니까? 확실히, 당신은 그 드라이버를 외모와 거의 동일하게 보이게 만들 수 있지만, 어떤 목적으로 사용됩니까?




  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 44회 ]  작성일19-10-29 19:44

웹학교