[CSS] <table>의 일부 컬럼 가로 스크롤링 기능

일단 참고했던 stackoverflow.

https://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-a-fixed-frozen-left-column-and-a-scrollable-b

How do I create an HTML table with a fixed/frozen left column and a scrollable body?

내가 필요했던 건 한두컬럼이 아니었고 게다가 colspan, rowspan 모두 섞인 상태여서 마이크로 설정이 필요했다

.scroll{
    overflow-x:scroll;
    overflow-y:visible;
    margin-left: 400px /* 스크롤영역의 왼쪽여백 설정 */
}
/* 고정시킬 컬럼의 공통 설정 */
.fixed{ 
    position: absolute; 
    width:50px;
    top:auto;
    border-top-width: 1px;
}
/* 고정영역별로 left 설정을 위해 클래스 생성 */
.fixed-title{
    min-width:130px;
    left:80px;
}
.fixed-name{
    left: 240px;
}
..

<div class='scroll'>
	<table>
    	<tr>
            <!-- position 설정 후 scroll영역과 1px차이가 나서 margin-top:-1px 넣어주고 width, height 설정값을 주었다 -->
        	<th class='fixed fixed-title'
            	style="height:70px; width:85px; margin-top:-1px;">
                <div style='text-align:center'>...</div>
            </th>
            ...
        </tr>
        <tr>
        	<td class='fixed fixed-title'>..</td>
            ...
        </tr>
    </table>
</div>

 

 

티스토리 코드 기능 처음 써보는데 완전 좋당!