[블레이저] 반응형 테이블

👨‍🏫 튜토리얼, 팁, 강좌
1

테이블의 열이 많은 경우, 휴대폰과 같이 좁은 화면에서는 테이블의 열이 깨집니다.

이를 방지하기 위해서, 가로 스크롤을 적용하는 방법이 있는데, 좁은 화면에서 가로 스크롤은 사용자 경험이 좋지 못할 수 있습니다.

대신에, css 의 미디어 쿼리를 사용하여, 화면에 따라 테이블의 열을 조정하는 방법을 사용할 수 있습니다.

@media (max-width: 768px) {
    /* 768px 이하 해상도에서는 덜 중요한 컬럼 숨기기 */
    table .optional-col {
        display: none;
    }
}

<table>
    <thead>
        <tr>
            <th>#</th>
            <th>이름</th>
            <th class="optional-col">직업</th>
            <th class="optional-col">지역</th>
            <th class="optional-col">회사</th>
            <th>나이</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var t in People.Select((p, i) => (i+1, p)))
        {
           var (order, person) = t;
            <tr>
                <td>@order</td>
                <td>@person.Name</td>
                <td class="optional-col">@person.Job</td>
                <td class="optional-col">@person.Location</td>
                <td class="optional-col">@person.Company</td>
                <td>@person.Age</td>
            </tr>
        }
    </tbody>
</table>

큰 화면에서는 테이블의 모들 열이 보이지만, 작은 화면에서는 optional-col로 지정된 열은 사라져, 화면이 깨지는 것을 방지할 수 있습니다.

6개의 좋아요