[CSS] td고정, 스크롤시 테이블 너비 고정

테이블 안에 스크롤

테이블 안에 스크롤이 와서 위 컬럼은 고정하고 아래 데이터만 스크롤 되게 하는 방법은 여러가지 방법이 있지만 css로 px값을 주어도 가능하다.

 

우선 css로

<style>
.table_container td {word-break:break-all}
</style>

html은

<div class="table_container text-center border_scroll">
						<table>
							<colgroup>
								<col style="width:40px">
								<col style="width:50px">
								<col style="width:80px">
								<col style="width:53px">
								<col style="width:53px">
								<col style="width:53px">
								<col style="width:70px">
								<col style="width:53px">
								<col style="width:60px">
								<col style="width:60px">
								<col style="width:53px">
							</colgroup>
							<thead>
								<th scope='col'>선택</th>
								<th scope='col'>발표<br>번호</th>
								<th scope='col' id="tableNameDt">태풍분석<br>일시</th>
								<th scope='col'>위도<br>(N)</th>
								<th scope='col'>경도<br>(E)</th>
								<th scope='col'>진행<br>방향</th>
								<th scope='col'>진행<br>속도</th>
								<th scope='col'>중심<br>기압</th>
								<th scope='col'>최대<br>풍속</th>
								<th scope='col'>15M/S<br>반경</th>
								<th scope='col'>25M/S<br>반경</th>
								<th scope='col'>한미일<br>태풍경로</th>
							</thead>
						</table>
				
						<div class="table_container text-center scroll" style="overflow-y:scroll;">
							<table>
								<colgroup>
									<col style="width:40px">
									<col style="width:50px">
									<col style="width:80px">
									<col style="width:53px">
									<col style="width:53px">
									<col style="width:53px">
									<col style="width:70px">
									<col style="width:53px">
									<col style="width:60px">
									<col style="width:60px">
									<col style="width:53px">
								</colgroup>
								<tbody>
									<tr>
                                    	<td>선택</td>
                                        <td>발표<br>번호</td>
                                        <td>태풍분석<br>일시</td>
                                        <td>위도<br>(N)</td>
                                        <td>경도<br>(E)</td>
                                        <td>진행<br>방향</td>
                                        <td>진행<br>속도</td>
                                        <td>중심<br>기압</td>
                                        <td>최대<br>풍속</td>
                                        <td>15M/S<br>반경</td>
                                        <td>25M/S<br>반경</td>
                                        <td>한미일<br>태풍경로</td>
                                    </tr>
								</tbody>
							</table>
						</div>
					</div>