[HTML] table 테이블 가로 스크롤, 왼쪽 첫번째 컬럼 세로 고정

■ table 테이블 가로 스크롤, 왼쪽 첫번째 컬럼 세로 고정

---

순수 CSS로 <style> position:sticky; 을 이용해 특정 컬럼을 고정할 수 있음

하기 예시 코드는 가로 스크롤이 생겼을 경우 왼쪽 가장 첫번째 컬럼이 고정되며,
n번째 컬럼까지 고정하고 싶을 경우 n번째 컬럼의 CSS <style> left:0px; 부분을 조절하면 됨
* 컬럼의 넓이(width) 고정값, n-1번째 위치만큼 더하여 left 값을 주면 됨

---

■ 예시 코드

<style>
  #table-sample { border-collapse:collapse; }
  #table-sample thead tr > th, #table-sample tfoot tr > th{ position:sticky; top:0; }
  #table-sample thead tr:first-child th:first-child,#table-sample tfoot tr:first-child th:first-child { left:0px; z-index:9; }
  #table-sample tbody tr > th { position:sticky; left:0px; z-index:99; }
</style>

<table id="table-sample">
    <thead>
        <tr>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table>