[php] 테이블 tbody에 스크롤 기능 추가하기.

<table>
	<thead>
    	<tr>
        	<th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
    </tbody>
</table>

 

이런 구조의 테이블이 있다. 이를 스크롤을 추가하려고 한다.

하지만 테이블이 깨진다.

이를 해결하기 위해서 찾아보다가 원본 사이트가 어딘지는 모르겠지만, 어제 발견했다가 오늘은 못 찾겠더라.

그래서 해당 내용을 게시한다.

table, thead {
	display:block;
    width:100%;
}

table thead tr {
	display:table;
    table-layout:fixed;
    width:100%;
}

tbody { 
	display: block;
    height: 13rem;
    overflow-y: scroll;
}

tbody tr {
	display: table;
    table-layout: fixed;
    width:100%;
}

 

작성예시

https://codesandbox.io/s/musing-danny-nc7q6?file=/style.css 

musing-danny-nc7q6 - CodeSandbox