테이블의 특정 열을 화면이 작아질 때 안 보이게 하는 방법

테이블의 특정 열을 화면이 작아질 때 안 보이게 하는 방법(폰에서는 안보이게)으로 실제 적용한 메뉴는 박스오피스 메뉴입니다.
데스크탑에서는 모든 항목이 출력되지만 태블릿 사이즈에 대응하는 768px이하에서는 순위, 영화명, 누적관객수만 보여집니다.
그대로 두면 셀의 크기 문제로 폰에서는 글자가 밑으로 밀리고 심하면 세로쓰기가 되버려서 중요 항목만 남기려고 적용을 해봤습니다.

2가지 방법이 있는데 첫번째가 CSS 미디어쿼리와 nth-child 조합이고 두번째는 부트스트랩의 유틸리티 클래스입니다.

예제에서는 3번째 열을 768px이하에서 숨기기입니다.

- 첫번째는 CSS 미디어쿼리 + nth-child 조합

<style>
  @media (max-width: 768px) {
    table tr > td:nth-child(3),
    table tr > th:nth-child(3) {
      display: none;
    }
  }
</style>

- 두번째는 부트스트랩 5 유틸리티 클래스 활용
d-none d-md-table-cell: md(768px) 미만에서는 숨기고, md 이상부터 보여주라는 의미

<table class="table">
  <thead>
    <tr>
      <th>첫번째 열</th>
      <th>두번째 열</th>
      <th class="d-none d-md-table-cell">세번째 열</th>
      <th>네번째 열</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>내용1</td>
      <td>내용2</td>
      <td class="d-none d-md-table-cell">내용3</td>
      <td>내용4</td>
    </tr>
  </tbody>
</table>

CSS 미디어쿼리 + nth-child 조합은 부트스트랩없어도 가능하고 사이즈에 유동적이지만 해당하는 소스를 추가해줘야 합니다. 
부트스트랩은 소스 추가를 안해도 되지만 미리 정의된 사이즈에서만 가능합니다.하지만 Sass 맵과 변수를 수정해서 가능합니다.