Build UIs that don't suck #4: Responsive tables that don't suck

✨cover in this video

1. Making sure long tables don't cause the entire page to overflow ( 긴 테이블이 페이지 전체를 오버플로우 시키지 않도록 한다)
2. Avoiding table content getting clipped by the padding on your page/layout container (페이지나 레이아웃 컨테이너의 패딩 때문에 테이블 내용이 잘리는 문제 해결)
3. Using flexbox to make sure you don't lose the padding on the far edge of the table ( 테이블이 화면 끝까지 밀려도 바깥쪽 패딩이 유지되도록 flexbox 조정)
4. Using CSS variables to make it easy to change your page padding responsively and have your tables adapt automatically ( 페이지 패딩을 반응형으로 쉽게 바꾸고, 테이블이 자동으로 조정되도록 CSS 변수 사용하기)

반응형 테이블 만들기

문제상황:
테이블을 모바일 화면에서 봤을 때 페이지 전체에 가로 스크롤이 생긴다.

해결방안
1. table 태그를 div 태그로 감싼 후 div태그에 overflow-x-auto를 준다.
2. 1번방식으로 해결하고 끝내면 그림처럼 패딩에 의해 짤려보인다.

but, 패딩 자체가 페이지의 패딩인 상황
3. div태그에 패딩 만큼 네거티브 마진을 준다 -mx-6
4. 또 하나의 내부 div태그를 table태그를 감싸 양끝 쪽에 패딩을 준다.
하지만 여전히 오른쪽 끝에 패딩이 안되어있다..
5. inline-bloc align-middle 을 준다. 또는 첫번째 div태그에 flex와 그 내부 div에는 grow를 준다.
6. 페이지 패딩을 변수로 주어 div태그에 썼던 네거티브 마진과 테이블 패딩에 변수를 사용한다.

<div class="px-(--page-padding) py-6 [--page-padding:--spacing(4)] sm:[--page-padding:--spacing(8)]">
  <div class="mx-auto max-w-6xl">
    <div class="flex items-end justify-between gap-4">
      <h1 class="text-2xl/8 font-semibold text-zinc-950 sm:text-xl/8">Orders</h1>
    </div>
    <div class="-mx-(--page-padding) mt-8 flex overflow-x-auto">
      <div class="grow px-(--page-padding)">
        <table class="min-w-full text-left text-sm/6 whitespace-nowrap text-zinc-950">
          <thead class="text-zinc-500">
            <tr>
              <th class="border-b border-b-zinc-950/10 px-4 py-2 font-medium first:pl-1 last:pr-1">Order number</th>
              <th class="border-b border-b-zinc-950/10 px-4 py-2 font-medium first:pl-1 last:pr-1">Purchase date</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td> ... </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>