반응형
폭 100% HTML 테이블, tbody 안에 세로 스크롤 포함
에 설정하려면 ?<table>폭 100%만을것것을0<tbody>세로 스크롤로 어느 정도 높이?
table {
width: 100%;
display:block;
}
thead {
display: inline-block;
width: 100%;
height: 20px;
}
tbody {
height: 200px;
display: inline-block;
width: 100%;
overflow: auto;
}
<table>
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
</tbody>
</table>나는 디브를 추가하는 것을 피하고 싶습니다. 내가 원하는 것은 이런 간단한 테이블과 디스플레이를 바꾸려고 할 때입니다.table-layout,position그리고 px로 고정된 폭에서만 100% 폭으로 CSS 테이블에 있는 훨씬 더 많은 것들이 잘 작동하지 않습니다.
를 만들기 <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고당을다e에 해당 값을 합니다.thead자바스크립트를 통한 열.
자동 너비 열
위 논리의 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의 경우) 출력입니다.
워킹데모.
전체 너비 표, 상대 너비 열
Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ,table의 100%까지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+ 포함)의 새로운 버전을 통해 윈도우 7에서 위의 두 가지 방법을 테스트해 보았는데 효과가 있었습니다.
테이블 레이아웃에서는 모든 요소가 동일한 구조적 속성을 따라야 하기 때문입니다.
사용함으로써display: block;을 위하여<thead>그리고.<tbody>우리가 테이블 구조를 깼습니다.
자바스크립트를 통한 레이아웃 재설계
한 가지 방법은 테이블 레이아웃 전체를 재설계하는 것입니다.JavaScript를 사용하여 플라이 앤 핸들에 새 레이아웃을 만들고 셀의 너비/높이를 동적으로 조정합니다.
예를 들어, 다음 예를 살펴봅니다.
- jQuery.floatThead() 플러그인(플로팅/잠금/스틱 테이블 헤더 플러그인)
- jQuery Scrollable Table 플러그인.(github의 소스 코드)
- jQuery.FixedHeaderTable() 플러그인(github의 소스 코드)
- 데이터 테이블 수직 스크롤 예제.
네스팅 테이블
이 접근법은 두 개의 중첩된 표와 포함된 디브를 사용합니다.table의만다a를 가진 있습니다.div은 그 에 은 에 에 은 .div요소.
CSS Play에서 Vertical 스크롤 테이블을 확인합니다.
이것은 대부분의 웹 브라우저에서 작동합니다.또한 자바스크립트를 통해 위의 논리를 동적으로 수행할 수 있습니다.
스크롤에 헤더가 고정된 테이블
를 하는 로 로 하는 <tbody>테이블 헤더를 각 행의 맨 위에 표시하고 있습니다. 우리는 위치를 지정할 수 있습니다.thead 요소fixed대신 화면 상단에 있습니다.
Julien이 수행한 이 접근 방식의 Working Demo를 소개합니다.그것은 유망한 웹 브라우저 지원을 가지고 있습니다.
여기 Willem Van Bockstal의 순수 CSS 구현이 있습니다.
순수 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이1입니다.100%및 각각에 대하여th그리고.td의 값, 의 width은다야다다 .100% / number of cols.
또한, 우리는 폭을 줄여야 합니다.thead수직 스크롤 바의 너비 값으로 표시됩니다.
그러기 위해서는 다음과 같이 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 Demov2 입니다.
이전 버전: jsFiddle 데모 1
다음 솔루션에서 테이블은 상위 컨테이너의 100%를 차지하며 절대 크기는 필요하지 않습니다.순수 CSS이며 플렉스 레이아웃을 사용합니다.
과 같습니다: 은 과 과 ！
발생 가능한 단점:
- 수직 스크롤 바는 필요 여부에 관계없이 항상 볼 수 있습니다.
- 테이블 레이아웃이 고정됨 - 열 크기가 내용 너비에 따라 조정되지 않음(여전히 원하는 열 너비를 명시적으로 설정할 수 있음).
- 스크롤 바의 너비는 제가 확인할 수 있었던 브라우저의 경우 0.9em 정도로 절대적인 크기가 하나 있습니다.
HTML(단축):
<div class="table-container">
<table>
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
</tr>
</thead>
<tbody>
<tr>
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
</tr>
...
</tbody>
</table>
</div>
CSS, 명확성을 위해 일부 장식이 생략됨:
.table-container {
height: 10em;
}
table {
display: flex;
flex-flow: column;
height: 100%;
width: 100%;
}
table thead {
/* head takes the height it requires,
and it's not scaled when table is resized */
flex: 0 0 auto;
width: calc(100% - 0.9em);
}
table tbody {
/* body takes all the remaining available space */
flex: 1 1 auto;
display: block;
overflow-y: scroll;
}
table tbody tr {
width: 100%;
}
table thead, table tbody tr {
display: table;
table-layout: fixed;
}
LESS에서 동일한 코드를 사용하여 다음과 같이 혼합할 수 있습니다.
.table-scrollable() {
@scrollbar-width: 0.9em;
display: flex;
flex-flow: column;
thead,
tbody tr {
display: table;
table-layout: fixed;
}
thead {
flex: 0 0 auto;
width: ~"calc(100% - @{scrollbar-width})";
}
tbody {
display: block;
flex: 1 1 auto;
overflow-y: scroll;
tr {
width: 100%;
}
}
}
CSS 전용
Chrome, Firefox, Edge(및 기타 에버그린 브라우저)용
간단히 ㅇposition: sticky; top: 0;당신의.th요소:
/* Fix table head */
.tableFixHead { overflow: auto; height: 100px; }
.tableFixHead th { position: sticky; top: 0; }
/* Just common table stuff. */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th { background:#eee; }<div class="tableFixHead">
<table>
<thead>
<tr><th>TH 1</th><th>TH 2</th></tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td></tr>
<tr><td>B1</td><td>B2</td></tr>
<tr><td>C1</td><td>C2</td></tr>
<tr><td>D1</td><td>D2</td></tr>
<tr><td>E1</td><td>E2</td></tr>
</tbody>
</table>
</div>PS: TH 요소에 대한 테두리가 필요한 경우th {box-shadow: 1px 1px 0 #000; border-top: 0;}(스크롤에서 기본 테두리가 올바르게 그려지지 않기 때문에) 도움이 될 것입니다.
IE11을 수용하기 위해 단지 약간의 JS를 사용하는 위의 변형에 대해서는 표고정 헤더와 스크롤 가능한 본문을 참조하십시오.
현대 브라우저에서는 CSS를 간단히 사용할 수 있습니다.
th {
position: sticky;
top: 0;
z-index: 2;
}
사용하고 있습니다.display:block위해서thead그리고.tbody에. 폭.thead이와.tbody기둥
table {
margin:0 auto;
border-collapse:collapse;
}
thead {
background:#CCCCCC;
display:block
}
tbody {
height:10em;overflow-y:scroll;
display:block
}
이것을 고치기 위해 나는 작게 사용합니다.jQuery코드 하지만 할 수 있습니다.JavaScript .만
var colNumber=3 //number of table columns
for (var i=0; i<colNumber; i++) {
var thWidth=$("#myTable").find("th:eq("+i+")").width();
var tdWidth=$("#myTable").find("td:eq("+i+")").width();
if (thWidth<tdWidth)
$("#myTable").find("th:eq("+i+")").width(tdWidth);
else
$("#myTable").find("td:eq("+i+")").width(thWidth);
}
다음은 제 작업 데모입니다. http://jsfiddle.net/gavroche/N7LEF/
IE 8에서 작동하지 않음
var colNumber=3 //number of table columns
for (var i=0; i<colNumber; i++)
{
var thWidth=$("#myTable").find("th:eq("+i+")").width();
var tdWidth=$("#myTable").find("td:eq("+i+")").width();
if (thWidth<tdWidth)
$("#myTable").find("th:eq("+i+")").width(tdWidth);
else
$("#myTable").find("td:eq("+i+")").width(thWidth);
} table {margin:0 auto; border-collapse:separate;}
thead {background:#CCCCCC;display:block}
tbody {height:10em;overflow-y:scroll;display:block}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="myTable" border="1">
<thead>
<tr>
<th>A really Very Long Header Text</th>
<th>Normal Header</th>
<th>Short</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
</tbody>
</table>두 개의 테이블을 차례로 만들고 두 번째 테이블을 고정 높이의 div에 넣고 오버플로 속성을 auto로 설정합니다.또한 두 번째 테이블에 있는 광고 안에 있는 모든 td의 것을 비워 둡니다.
<div>
<table>
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
</tr>
</thead>
</table>
</div>
<div style="max-height:500px;overflow:auto;">
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
</tbody>
</table>
</div>
저는 다음 지침을 따라 순수 CSS로 최종적으로 맞았습니다.
http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/
첫 번째 단계는 다음을 설정하는 것입니다.<tbody>표시: 오버플로와 높이를 적용할 수 있도록 차단합니다.서부터의 행<thead>display: 치 수 .대및시롤한의제맨다에록야로다록야로d에맨의한n:eoto치knyde:o:l'<tbody>.
tbody, thead { display: block; overflow-y: auto; }
은.<thead>합니다. 다 명시적인 너비가 합니다.
td:nth-child(1), th:nth-child(1) { width: 100px; }
td:nth-child(2), th:nth-child(2) { width: 100px; }
td:nth-child(3), th:nth-child(3) { width: 100px; }
하지만 불행하게도 그것으로는 충분하지 않습니다.스크롤 바가 존재할 때 브라우저는 그것을 위한 공간을 할당합니다. 따라서<tbody>용더다이한다e더esesnpg용이한<thead>로 인해 오류가 이것이 약간의 정렬 오류를 유발한다는 것에 주목하세요.
마지막 열을 제외한 모든 열에 최소 너비를 설정하는 것이 제가 생각해낼 수 있는 유일한 방법이었습니다.
td:nth-child(1), th:nth-child(1) { min-width: 100px; }
td:nth-child(2), th:nth-child(2) { min-width: 100px; }
td:nth-child(3), th:nth-child(3) { width: 100px; }
아래의 전체 코드펜 예:
CSS:
.fixed_headers {
width: 750px;
table-layout: fixed;
border-collapse: collapse;
}
.fixed_headers th {
text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
padding: 5px;
text-align: left;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
min-width: 200px;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
min-width: 200px;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
width: 350px;
}
.fixed_headers thead {
background-color: #333333;
color: #fdfdfd;
}
.fixed_headers thead tr {
display: block;
position: relative;
}
.fixed_headers tbody {
display: block;
overflow: auto;
width: 100%;
height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
background-color: #dddddd;
}
.old_ie_wrapper {
height: 300px;
width: 750px;
overflow-x: hidden;
overflow-y: auto;
}
.old_ie_wrapper tbody {
height: auto;
}
html:
<!-- IE < 10 does not like giving a tbody a height. The workaround here applies the scrolling to a wrapped <div>. -->
<!--[if lte IE 9]>
<div class="old_ie_wrapper">
<!--<![endif]-->
<table class="fixed_headers">
<thead>
<tr>
<th>Name</th>
<th>Color</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Pear</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Grape</td>
<td>Purple / Green</td>
<td>These are purple and green.</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
<td>These are yellow.</td>
</tr>
<tr>
<td>Kiwi</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Plum</td>
<td>Purple</td>
<td>These are Purple</td>
</tr>
<tr>
<td>Watermelon</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Tomato</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Cherry</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Cantelope</td>
<td>Orange</td>
<td>These are orange inside.</td>
</tr>
<tr>
<td>Honeydew</td>
<td>Green</td>
<td>These are green inside.</td>
</tr>
<tr>
<td>Papaya</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Raspberry</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Blueberry</td>
<td>Blue</td>
<td>These are blue.</td>
</tr>
<tr>
<td>Mango</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr>
<td>Passion Fruit</td>
<td>Green</td>
<td>These are green.</td>
</tr>
</tbody>
</table>
<!--[if lte IE 9]>
</div>
<!--<![endif]-->
편집: 테이블 너비 100%에 대한 대체 솔루션(위는 실제로 고정 너비에 대한 것이며 질문에 대답하지 않았습니다):
HTML:
<table>
<thead>
<tr>
<th>Name</th>
<th>Color</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Pear</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Grape</td>
<td>Purple / Green</td>
<td>These are purple and green.</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
<td>These are yellow.</td>
</tr>
<tr>
<td>Kiwi</td>
<td>Green</td>
<td>These are green.</td>
</tr>
</tbody>
</table>
CSS:
table {
width: 100%;
text-align: left;
min-width: 610px;
}
tr {
height: 30px;
padding-top: 10px
}
tbody {
height: 150px;
overflow-y: auto;
overflow-x: hidden;
}
th,td,tr,thead,tbody { display: block; }
td,th { float: left; }
td:nth-child(1),
th:nth-child(1) {
width: 20%;
}
td:nth-child(2),
th:nth-child(2) {
width: 20%;
float: left;
}
td:nth-child(3),
th:nth-child(3) {
width: 59%;
float: left;
}
/* some colors */
thead {
background-color: #333333;
color: #fdfdfd;
}
table tbody tr:nth-child(even) {
background-color: #dddddd;
}
데모: http://codepen.io/anon/pen/bNJeLO
td에 고정된 너비를 추가하면 tbody와 ad display block이 완벽하게 작동하며, slim scroll plugin을 사용하여 스크롤 바를 아름답게 만들 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title> Scrollable table </title>
<style>
body {
font-family: sans-serif;
font-size: 0.9em;
}
table {
border-collapse: collapse;
border-bottom: 1px solid #ddd;
}
thead {
background-color: #333;
color: #fff;
}
thead,tbody {
display: block;
}
th,td {
padding: 8px 10px;
border: 1px solid #ddd;
width: 117px;
box-sizing: border-box;
}
tbody {
height: 160px;
overflow-y: scroll
}
</style>
</head>
<body>
<table class="example-table">
<thead>
<tr>
<th> Header 1 </th>
<th> Header 2 </th>
<th> Header 3 </th>
<th> Header 4 </th>
</tr>
</thead>
<tbody>
<tr>
<td> Row 1- Col 1 </td>
<td> Row 1- Col 2 </td>
<td> Row 1- Col 3 </td>
<td> Row 1- Col 4 </td>
</tr>
<tr>
<td> Row 2- Col 1 </td>
<td> Row 2- Col 2 </td>
<td> Row 2- Col 3 </td>
<td> Row 2- Col 4 </td>
</tr>
<tr>
<td> Row 3- Col 1 </td>
<td> Row 3- Col 2 </td>
<td> Row 3- Col 3 </td>
<td> Row 3- Col 4 </td>
</tr>
<tr>
<td> Row 4- Col 1 </td>
<td> Row 4- Col 2 </td>
<td> Row 4- Col 3 </td>
<td> Row 4- Col 4 </td>
</tr>
<tr>
<td> Row 5- Col 1 </td>
<td> Row 5- Col 2 </td>
<td> Row 5- Col 3 </td>
<td> Row 5- Col 4 </td>
</tr>
<tr>
<td> Row 6- Col 1 </td>
<td> Row 6- Col 2 </td>
<td> Row 6- Col 3 </td>
<td> Row 6- Col 4 </td>
</tr>
<tr>
<td> Row 7- Col 1 </td>
<td> Row 7- Col 2 </td>
<td> Row 7- Col 3 </td>
<td> Row 7- Col 4 </td>
</tr>
<tr>
<td> Row 8- Col 1 </td>
<td> Row 8- Col 2 </td>
<td> Row 8- Col 3 </td>
<td> Row 8- Col 4 </td>
</tr>
<tr>
<td> Row 9- Col 1 </td>
<td> Row 9- Col 2 </td>
<td> Row 9- Col 3 </td>
<td> Row 9- Col 4 </td>
</tr>
<tr>
<td> Row 10- Col 1 </td>
<td> Row 10- Col 2 </td>
<td> Row 10- Col 3 </td>
<td> Row 10- Col 4 </td>
</tr>
<tr>
<td> Row 11- Col 1 </td>
<td> Row 11- Col 2 </td>
<td> Row 11- Col 3 </td>
<td> Row 11- Col 4 </td>
</tr>
<tr>
<td> Row 12- Col 1 </td>
<td> Row 12- Col 2 </td>
<td> Row 12- Col 3 </td>
<td> Row 12- Col 4 </td>
</tr>
<tr>
<td> Row 13- Col 1 </td>
<td> Row 13- Col 2 </td>
<td> Row 13- Col 3 </td>
<td> Row 13- Col 4 </td>
</tr>
<tr>
<td> Row 14- Col 1 </td>
<td> Row 14- Col 2 </td>
<td> Row 14- Col 3 </td>
<td> Row 14- Col 4 </td>
</tr>
<tr>
<td> Row 15- Col 1 </td>
<td> Row 15- Col 2 </td>
<td> Row 15- Col 3 </td>
<td> Row 15- Col 4 </td>
</tr>
<tr>
<td> Row 16- Col 1 </td>
<td> Row 16- Col 2 </td>
<td> Row 16- Col 3 </td>
<td> Row 16- Col 4 </td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script>
<script>
$('.example-table tbody').slimscroll({
height: '160px',
alwaysVisible: true,
color: '#333'
})
</script>
</body>
</html>열을 '차단' tbody로 올바르게 표시하기 위한 CSS 해결 방법
은 을 합니다 합니다 가 필요합니다.thjQueryjQuery에서입니다.
table.scroll tbody,
table.scroll thead { display: block; }
table.scroll tbody {
overflow-y: auto;
overflow-x: hidden;
max-height: 300px;
}
table.scroll tr {
display: flex;
}
table.scroll tr > td {
flex-grow: 1;
flex-basis: 0;
}
그리고 Jquery / 자바스크립트
var $table = $('#the_table_element'),
$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
아래의 접근 방식을 시도해 보십시오. 구현이 매우 간단합니다.
아래는 jsfiddle 링크입니다.
http://jsfiddle.net/v2t2k8ke/2/
HTML:
<table border='1' id='tbl_cnt'>
<thead><tr></tr></thead><tbody></tbody>
CSS:
#tbl_cnt{
border-collapse: collapse; width: 100%;word-break:break-all;
}
#tbl_cnt thead, #tbl_cnt tbody{
display: block;
}
#tbl_cnt thead tr{
background-color: #8C8787; text-align: center;width:100%;display:block;
}
#tbl_cnt tbody {
height: 100px;overflow-y: auto;overflow-x: hidden;
}
쿼리:
var data = [
{
"status":"moving","vehno":"tr544","loc":"bng","dri":"ttt"
}, {
"status":"stop","vehno":"tr54","loc":"che", "dri":"ttt"
},{ "status":"idle","vehno":"yy5499999999999994","loc":"bng","dri":"ttt"
},{
"status":"moving","vehno":"tr544","loc":"bng", "dri":"ttt"
}, {
"status":"stop","vehno":"tr54","loc":"che","dri":"ttt"
},{
"status":"idle","vehno":"yy544","loc":"bng","dri":"ttt"
}
];
var sth = '';
$.each(data[0], function (key, value) {
sth += '<td>' + key + '</td>';
});
var stb = '';
$.each(data, function (key, value) {
stb += '<tr>';
$.each(value, function (key, value) {
stb += '<td>' + value + '</td>';
});
stb += '</tr>';
});
$('#tbl_cnt thead tr').append(sth);
$('#tbl_cnt tbody').append(stb);
setTimeout(function () {
var col_cnt=0
$.each(data[0], function (key, value) {col_cnt++;});
$('#tbl_cnt thead tr').css('width', ($("#tbl_cnt tbody") [0].scrollWidth)+ 'px');
$('#tbl_cnt thead tr td,#tbl_cnt tbody tr td').css('width', ($('#tbl_cnt thead tr ').width()/Number(col_cnt)) + 'px');}, 100)
이것은 스크롤 가능한 tbody가 있는 테이블에 끈적끈적한 표제를 만드는 데 사용할 수 있는 코드입니다.
table ,tr td{
border:1px solid red
}
tbody {
display:block;
height:50px;
overflow:auto;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;/* even columns width , fix width of table too*/
}
thead {
width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
width:400px;
}
이 js fiddle을 사용해 보세요.이것은 jQuery를 사용하는 것이고 Hashem Qolami의 답변으로 만들어졌습니다.처음에는 일반 테이블을 만들고 스크롤이 가능하도록 합니다.
const makeScrollableTable = function (tableSelector, tbodyHeight) {
let $table = $(tableSelector);
let $bodyCells = $table.find('tbody tr:first').children();
let $headCells = $table.find('thead tr:first').children();
let headColWidth = 0;
let bodyColWidth = 0;
headColWidth = $headCells.map(function () {
return $(this).outerWidth();
}).get();
bodyColWidth = $bodyCells.map(function () {
return $(this).outerWidth();
}).get();
$table.find('thead tr').children().each(function (i, v) {
$(v).css("width", headColWidth[i]+"px");
$(v).css("min-width", headColWidth[i]+"px");
$(v).css("max-width", headColWidth[i]+"px");
});
$table.find('tbody tr').children().each(function (i, v) {
$(v).css("width", bodyColWidth[i]+"px");
$(v).css("min-width", bodyColWidth[i]+"px");
$(v).css("max-width", bodyColWidth[i]+"px");
});
$table.find('thead').css("display", "block");
$table.find('tbody').css("display", "block");
$table.find('tbody').css("height", tbodyHeight+"px");
$table.find('tbody').css("overflow-y", "auto");
$table.find('tbody').css("overflow-x", "hidden");
};
그러면 다음과 같이 이 기능을 사용할 수 있습니다.
makeScrollableTable('#test-table', 250);
"overflow: scroll"을 사용하려면 광고 및 tbody에서 "display:block"을 설정해야 합니다.그리고 그것은 그들 사이의 열 폭을 엉망으로 만듭니다.그러나 자바스크립트로 해당 행을 복제하고 숨겨진 행으로 tbody에 붙여넣어 정확한 col width를 유지할 수 있습니다.
$('.myTable thead > tr')
.clone()
.appendTo('.myTable tbody')
.addClass('hidden-to-set-col-widths')
;
http://jsfiddle.net/Julesezaar/mup0c5hk/
<table class="myTable">
<thead>
<tr>
<td>Problem</td>
<td>Solution</td>
<td>blah</td>
<td>derp</td>
</tr>
</thead>
<tbody></tbody>
</table>
<p>
Some text to here
</p>
CSS:
table {
background-color: #aaa;
width: 100%;
}
thead,
tbody {
display: block; // Necessary to use overflow: scroll
}
tbody {
background-color: #ddd;
height: 150px;
overflow-y: scroll;
}
tbody tr.hidden-to-set-col-widths,
tbody tr.hidden-to-set-col-widths td {
visibility: hidden;
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
}
td {
padding: 3px 10px;
}
언급URL : https://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody
반응형
'programing' 카테고리의 다른 글
| 세션의 CSRF 보호 토큰을 노출하는 것이 안전합니까? (0) | 2023.09.16 |
|---|---|
| m이 3x3 행렬일 때 m[1] - m[0]이 3을 반환하는 이유는 무엇입니까? (0) | 2023.09.16 |
| 저장소를 사용하지 않고 호스트 간에 도커 이미지를 복사하는 방법 (0) | 2023.09.16 |
| XML에서 잘못된 문자는 무엇입니까? (0) | 2023.09.16 |
| 판다 왼쪽 바깥쪽 조인 결과 왼쪽 테이블보다 큰 테이블이 나타남 (0) | 2023.09.16 |