본문 바로가기
IT 이모저모

CSS fixed header and 1 column

by DSEM 2023. 11. 7.
728x90
728x90

 

테이블의 왼쪽 열을 고정하는 것은 테이블 헤더를 고정하는 것과 비슷한 방식으로 처리할 수 있습니다

 

CSS 삽입

<style>

#myTable thead { position: sticky; top: 0; z-index: 1; background-color: #f0f0f0; color: #ffffff}
#myTable th:first-child,
#myTable td:first-child { position: sticky; left: 0; }

</style>

 

HTML Table  구성

<table id="myTable">
	<thead>
	<tr>
		<th>1</th>
		<th>2</th>
		<th>3</th>
	</tr>
	</thead>

	<tbody id="myTableBody">
		<tr>
			<td>111</td>
			<td>222</td>
			<td>333</td>
		</tr>
		<tr>
			<td>444</td>
			<td>555</td>
			<td>666</td>
		</tr>
	</tbody>
</table>

 

728x90
반응형

댓글