<tbody>요소를 스크롤 가능 하게 하려면 페이지에 표시되는 방식을 변경해야합니다. 즉 display: block;, 요소를 블록 수준 요소로 표시하는 데 사용 합니다.
의 display속성을 tbody변경 thead하므로 테이블 레이아웃이 깨지지 않도록 요소의 속성을 변경해야 합니다.
그래서 우리는 :
thead, tbody { display: block; }
tbody {
height: 100px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
}
웹 브라우저 는 기본적으로 thead및 tbody요소를 행 그룹 ( table-header-group및 table-row-group)으로 표시합니다.
일단 변경하면 내부 tr요소가 컨테이너의 전체 공간을 채우지 않습니다.
이를 해결하려면 tbody열 너비를 계산 하고 해당 값을 theadJavaScript를 통해 열에 적용해야합니다 .
자동 너비 열
위 로직의 jQuery 버전은 다음과 같습니다.
// Change the selector if needed
var $table = $('table'),
$bodyCells = $table.find('tbody tr:first').children(),
colWidth;
// 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]);
});
다음은 출력입니다 (Windows 7 Chrome 32) .
작업 데모 .
전체 너비 테이블, 상대 너비 열
원본 포스터가 필요 했으므로 컨테이너의 table100 %까지 확장 width한 다음 테이블의 각 열에 대해 상대 ( 백분율 )를 width사용할 수 있습니다.
table {
width: 100%; /* Optional */
}
tbody td, thead th {
width: 20%; /* Optional */
}
테이블에는 유체 레이아웃이thead 있으므로 컨테이너 크기를 조정할 때 열 너비를 조정해야합니다 .
따라서 창 크기를 조정하면 열 너비를 설정해야합니다.
// Adjust the width of thead cells when *window* resizes
$(window).resize(function() {
/* Same as before */
}).resize(); // Trigger the resize handler once the script runs
결과는 다음과 같습니다.
작업 데모 .
브라우저 지원 및 대안
새로운 버전의 주요 웹 브라우저 (IE10 + 포함)를 통해 Windows 7에서 위의 두 가지 방법을 테스트했으며 작동했습니다.
그러나 IE9 이하에서는 제대로 작동 하지 않습니다 .
테이블 레이아웃 에서 모든 요소는 동일한 구조적 속성을 따라야 하기 때문 입니다 .
사용하여 display: block;을 위해 <thead>및 <tbody>요소, 우리는 테이블 구조를 파괴했습니다.
JavaScript를 통한 레이아웃 재 설계
한 가지 방법은 (전체) 테이블 레이아웃을 다시 디자인하는 것입니다. JavaScript를 사용하여 즉시 새 레이아웃을 만들고 셀의 너비 / 높이를 동적으로 처리 및 / 또는 조정합니다.
예를 들어 다음 예를 살펴보십시오.
중첩 테이블
이 방법은 div가 포함 된 두 개의 중첩 테이블을 사용합니다. 첫 번째 table셀에는 하나의 셀만 div있고 두 번째 테이블은 해당 div요소 안에 있습니다.
CSS Play 에서 세로 스크롤 테이블 을 확인하십시오 .
이것은 대부분의 웹 브라우저에서 작동합니다. JavaScript를 통해 위의 논리를 동적으로 수행 할 수도 있습니다.
스크롤에 고정 헤더가있는 테이블
(가)에 수직 스크롤바 추가의 목적 때문에 <tbody>테이블 표시되는 헤더를 각 행의 상단을, 우리 수 위치thead 요지 소자 fixed대신 화면 상단.
Julien 이 수행 한이 접근법 의 실무 데모 는 다음과 같습니다 .
유망한 웹 브라우저 지원이 있습니다.
그리고 여기 순수 CSS에 의해 구현 빌렘 반 Bockstal .
순수한 CSS 솔루션
오래된 대답은 다음과 같습니다. 물론 새로운 방법을 추가하고 CSS 선언을 개선했습니다.
너비가 고정 된 테이블
이 경우 table에는 고정되어 있어야합니다 width (열 너비와 세로 스크롤 막대 너비의 합계 포함) .
각 열은 특정 있어야 폭 앤드 마지막 항목 의 thead요소가 더 요구 폭 다른 '으로 동일 폭 +를 가로 세로 스크롤 바있다.
따라서 CSS는 다음과 같습니다.
table {
width: 716px; /* 140px * 5 column + 16px scrollbar width */
border-spacing: 0;
}
tbody, thead tr { display: block; }
tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody td, thead th {
width: 140px;
}
thead th:last-child {
width: 156px; /* 140px + 16px scrollbar width */
}
출력은 다음과 같습니다.
작업 데모 .
너비가 100 % 인 테이블
이 방식에서,은 table의 폭을 가지고 100%각각 대를 th하고 td값, width속성 미만이어야한다 100% / number of cols.
또한, 우리는 줄일 필요가 폭 의을 thead의 값으로 폭 수직 스크롤 바의.
그렇게하려면 calc()다음과 같이 CSS3 함수 를 사용해야 합니다.
table {
width: 100%;
border-spacing: 0;
}
thead, tbody, tr, th, td { display: block; }
thead tr {
/* fallback */
width: 97%;
/* minus scroll bar width */
width: -webkit-calc(100% - 16px);
width: -moz-calc(100% - 16px);
width: calc(100% - 16px);
}
tr:after { /* clearing float */
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody td, thead th {
width: 19%; /* 19% is less than (100% / 5 cols) = 20% */
float: left;
}
다음은 온라인 데모 입니다.
참고 : 이 방법은 각 열의 내용이 줄을 바꾸면 실패 합니다. 즉 , 각 셀의 내용이 충분히 짧아야합니다 .
다음에는 이 질문에 대답 할 때 만든 순수한 CSS 솔루션 의 간단한 두 가지 예가 있습니다.
다음은 jsFiddle Demo v2 입니다.
이전 버전 : jsFiddle Demo v1
