[HTML][CSS] 스크롤 사용 메뉴 상단고정 (테이블 메뉴 상단 고정)

UI를 구현하다보면 List를 정해진 div 크기안에서 테이블로 뿌려줘야할때가 있다.

이때에 상단 thead를 고정시키는 방법을 알려주겠다.

 

table 태그안에는 div태그를 넣을 수 없기 때문에 thead와 tbody를 위한 table을 각각 만들어주고 상단 고정을 위해 thead가 들어있는 table은 div를 만들어 주어 style을 적용시킨다.

 

1. 기존코드

- 하나의 div 안에 하나의 table이 존재한다.

<div class="list" style="width:1024px; height:500px; border: 1px solid #999; overflow:auto">
  <table class="mu-grid">
      <caption>번호, 제목, 작성자, 작성일을 보여주는 공지사항 게시판입니다.</caption>
      <colgroup>
        <col style="width: 80px">
        <col style="width: 100px">
        <col style="width: 200px">
      </colgroup>
      <thead>
        <tr>
          <th scope="col">번호</th>
          <th scope="col">일자</th>
          <th scope="col">제목</th>
        </tr>
      </thead>
      <tbody>
      	<tr>
          <th scope="col">1</th>
          <th scope="col">2021.12.28</th>
          <th scope="col">상단 고정 메뉴</th>
        </tr>
      </tbody>
  </table>
</div>

2. 수정코드

- 하나의 div안에 상단 고정을 위한 div(thead가 들어감)를 만들어주고 table도 각자 생성해 주었다.

<div class="list" style="width:1024px; height:500px; border: 1px solid #999; overflow:auto">
  <div style="position:sticky; top:0">
    <table class="mu-grid">
      <caption>번호, 제목, 작성자, 작성일을 보여주는 공지사항 게시판입니다.</caption>
      <colgroup>
        <col style="width: 80px">
        <col style="width: 100px">
        <col style="width: 200px">
      </colgroup>
      <thead>
        <tr>
          <th scope="col">번호</th>
          <th scope="col">일자</th>
          <th scope="col">제목</th>
        </tr>
      </thead>
    </table>
  </div>
  
  <table class="mu-grid">
      <caption>번호, 제목, 작성자, 작성일을 보여주는 공지사항 게시판입니다.</caption>
      <colgroup>
        <col style="width: 80px">
        <col style="width: 100px">
        <col style="width: 200px">
      </colgroup>
      <tbody>
        <tr>
            <th scope="col">1</th>
            <th scope="col">2021.12.28</th>
            <th scope="col">상단 고정 메뉴</th>
        </tr>
      </body>
  </table>
</div>