테이블의 열이 많은 경우, 휴대폰과 같이 좁은 화면에서는 테이블의 열이 깨집니다.
이를 방지하기 위해서, 가로 스크롤을 적용하는 방법이 있는데, 좁은 화면에서 가로 스크롤은 사용자 경험이 좋지 못할 수 있습니다.
대신에, 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
로 지정된 열은 사라져, 화면이 깨지는 것을 방지할 수 있습니다.