table 의 tbody 에 세로 scroll 적용하기
JS
function tableAutoResize(){
var $table = $('#table_scroll'),
$bodyCells = $table.find('tbody tr:first').children(),
colWidth;
$table.addClass('scroll');
// Adjust the width of thead cells when window resizes
$(window).resize(function () {
// Get the tbody columns width array
colWidth = $bodyCells.map(function () {
return $(this).width();
}).get();
// Set the width of thead columns
$table.find('thead tr').children().each(function (i, v) {
$(v).width(colWidth[i]);
});
}).resize(); // Trigger resize handler
}
CSS
table.scroll tbody,
table.scroll thead { display: block; }
table.scroll tbody {
overflow-y: auto;
overflow-x: hidden;
max-height: 100px;
}
table.scroll tr {
display: flex;
}
table.scroll tr > td {
display: flex; //IE전용, 이것때문에 개삽질함!
justify-content: center; //flex 가운데 정렬
flex-grow: 1;
flex-basis: 0;
}
순수 CSS만으로는 불가능 하다는 것이 내 결론이다.
해답은 항상 정해져 있다. 구글 + 스텍오버플로우
원하는 table 의 id을 정해주고, document ready 시 위 함수를 호출해주면 된다.
