반응형
오버플로 스크롤을 사용하여 차체 높이를 설정하는 방법
차체 높이 너비 오버플로 스크롤을 설정하는 동안 문제가 발생했습니다.
<style>
tbody{
height:50px;display:block;overflow:scroll
}
</style>
<h3>Table B</h3>
<table style="border: 1px solid red;width:300px;display:block">
<thead>
<tr>
<td>Name</td>
<td>phone</td>
</tr>
</thead>
<tbody style='height:50px;display:block;overflow:scroll'>
<tr>
<td>AAAA</td>
<td>323232</td>
</tr>
<tr>
<td>BBBBB</td>
<td>323232</td>
</tr>
<tr>
<td>CCCCC</td>
<td>3435656</td>
</tr>
</tbody>
</table>
저는 오버플로 스크롤이 있는 A 테이블과 같은 B 테이블을 원합니다.
어떤 도움이든 감사하겠습니다.
감사합니다, M.
네가 원한다면tbody스크롤 막대를 표시하려면 스크롤 막대 설정display: block;.
트display: table;를해위를 .tr테이블의 동작을 유지하도록 합니다.
펼치기 세를균게펼위해치기하일포,위해▁to▁use,table-layout: fixed;.
(edit 08-2023)Disclaimer : 답변의 맨 아래까지 읽습니다.이제는 부작용을 피하기 위해 그리드 레이아웃으로 전환할 수 있습니다.
CSS:
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;
}
한다면tbody내용이 다음보다 작기 때문에 스크롤이 표시되지 않습니다.height또는max-height다음을 사용하여 언제든지 스크롤을 설정합니다.overflow-y: scroll;데모 2
<editS/updateS> 2019 - 04/2021
- 중요: 스크롤 가능한 테이블을 만드는 이 방법에는 경우에 따라 단점이 있습니다.(아래 설명 참조) 이 스레드의 중복 답변 중 일부는 동일한 경고를 받을 자격이 있습니다.
경고: 이 솔루션은 AD 및 tBody 셀 그리드의 연결을 끊습니다. 즉, 대부분의 실제적인 경우 테이블에서 원하는 셀 정렬을 수행할 수 없습니다.이 솔루션은 해커를 사용하여 정렬 상태를 유지합니다. 광고 {width: calc(100% - 1em ) }
어쨌든 스크롤 막대를 설정하려면 테이블 레이아웃을 제거하기 위해 디스플레이 재설정이 필요합니다(스크롤 막대는 절대 표시되지 않음).
<table>을 통해 격자 안으로.display:grid/contents또한 헤더와 스크롤 가능한 부분 사이에 공백이 있습니다.(div에서 빌드된 경우 식별)overflow:overlay;아직 Firefox에 나타나지 않았습니다(계속 시청).position:sticky수합니다. 중인 컨테이너를 하십시오.thead만약 당신이 몇 줄을 가지고 있다면 끈적거릴 수 있습니다.rowspan/colspan헤더가 포함되어 있습니다(크롬과 함께 사용되지 않습니다).
아직까지 CSS만을 통한 완벽한 해결책은 없습니다.자신의 테이블에 맞게 선택할 수 있는 몇 가지 평균적인 방법이 있습니다(테이블-테이블:고정, is ...).테이블과 열의 너비를 고정하지만 자바스크립트를 사용하여 해당 값을 재설정할 수 있습니다. => 순수 CSS 종료)
또 다른 방법은 테이블을 스크롤 가능한 요소로 감싸고 머리글 셀을 맨 위에 붙이도록 설정하는 것입니다.
이 방법의 장점은 본문의 디스플레이를 변경할 필요가 없고 데이터 셀 열 너비와 일치하도록 헤더 셀 너비를 유지하면서 열 너비를 계산하는 것을 브라우저에 맡길 수 있다는 것입니다.
/* Set a fixed scrollable wrapper */
.tableWrap {
height: 200px;
border: 2px solid black;
overflow: auto;
}
/* Set header to stick to the top of the container. */
thead tr th {
position: sticky;
top: 0;
}
/* If we use border,
we must use table-collapse to avoid
a slight movement of the header row */
table {
border-collapse: collapse;
}
/* Because we must set sticky on th,
we have to apply background styles here
rather than on thead */
th {
padding: 16px;
padding-left: 15px;
border-left: 1px dotted rgba(200, 209, 224, 0.6);
border-bottom: 1px solid #e8e8e8;
background: #ffc491;
text-align: left;
/* With border-collapse, we must use box-shadow or psuedo elements
for the header borders */
box-shadow: 0px 0px 0 2px #e8e8e8;
}
/* Basic Demo styling */
table {
width: 100%;
font-family: sans-serif;
}
table td {
padding: 16px;
}
tbody tr {
border-bottom: 2px solid #e8e8e8;
}
thead {
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
}
tbody tr:hover {
background: #e6f7ff;
}<div class="tableWrap">
<table>
<thead>
<tr>
<th><span>Month</span></th>
<th>
<span>Event</span>
</th>
<th><span>Action</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>February. An extra long string.</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>March</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>April</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>May</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>June</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>July</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>August</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>September</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>October</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>November</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>December</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
</tbody>
</table>
</div>테이블 본문으로 스크롤 막대를 사용하는 간단한 방법
/* It is simple way to use scroll bar to table body*/
table tbody {
display: block;
max-height: 300px;
overflow-y: scroll;
}
table thead, table tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}<table>
<thead>
<th>Invoice Number</th>
<th>Purchaser</th>
<th>Invoice Amount</th>
<th>Invoice Date</th>
</thead>
<tbody>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
</tbody>
</table>으로 기적으로overflow에는 " 를정는한테그이룹요않적습다니소용지되에는블않지"를 하지 않는 한 .display:block<tbody>또한 당신은 주어야 합니다.position:relative그리고.display: block<thead>데모를 확인합니다.
.fixed {
width:350px;
table-layout: fixed;
border-collapse: collapse;
}
.fixed th {
text-decoration: underline;
}
.fixed th,
.fixed td {
padding: 5px;
text-align: left;
min-width: 200px;
}
.fixed thead {
background-color: red;
color: #fdfdfd;
}
.fixed thead tr {
display: block;
position: relative;
}
.fixed tbody {
display: block;
overflow: auto;
width: 100%;
height: 100px;
overflow-y: scroll;
overflow-x: hidden;
}
가장 간단한 솔루션:
CSS에 다음 코드를 추가합니다.
.tableClassName tbody {
display: block;
max-height: 200px;
overflow-y: scroll;
}
.tableClassName thead, .tableClassName tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
.tableClassName thead {
width: calc( 100% - 1.1em );
}
1.1em은 스크롤 막대의 평균 너비입니다. 필요한 경우 이를 수정하십시오.
이 답변을 바탕으로 부트스트랩을 이미 사용하고 있는 경우 최소한의 솔루션은 다음과 같습니다.
div.scrollable-table-wrapper {
height: 500px;
overflow: auto;
thead tr th {
position: sticky;
top: 0;
}
}
<div class="scrollable-table-wrapper">
<table class="table">
<thead>...</thead>
<tbody>...</tbody>
</table>
</div>
부트스트랩 v3에서 테스트됨
이것이 오래된 질문이라는 것을 알지만, 고정된 머리글과 바닥글을 만들 때 우연히 발견했습니다.저는 제가 필요로 하는 것에 잘 맞는 간단한 해결책으로 이 게시물을 찾았습니다.
table thead,
table tfoot {
position: sticky;
}
table thead {
inset-block-start: 0; /* "top" */
}
table tfoot {
inset-block-end: 0; /* "bottom" */
}
두 번째 테이블 코드를 아래와 같이 변경합니다.
<table style="border: 1px solid red;width:300px;display:block;">
<thead>
<tr>
<td width=150>Name</td>
<td width=150>phone</td>
</tr>
</thead>
<tbody style='height:50px;overflow:auto;display:block;width:317px;'>
<tr>
<td width=150>AAAA</td>
<td width=150>323232</td>
</tr>
<tr>
<td>BBBBB</td>
<td>323232</td>
</tr>
<tr>
<td>CCCCC</td>
<td>3435656</td>
</tr>
</tbody>
</table>
저의 경우 다른 답변과 같이 픽셀 단위로 고정된 높이 대신 응답 테이블 높이를 원합니다.이를 위해 테이블이 포함된 div의 가시적 높이 속성 및 오버플로 비율을 사용했습니다.
&__table-container {
height: 70vh;
overflow: scroll;
}
이렇게 하면 창의 크기가 조정될 때 표가 확장됩니다.
HTML:
<table id="uniquetable">
<thead>
<tr>
<th> {{ field[0].key }} </th>
<th> {{ field[1].key }} </th>
<th> {{ field[2].key }} </th>
<th> {{ field[3].key }} </th>
</tr>
</thead>
<tbody>
<tr v-for="obj in objects" v-bind:key="obj.id">
<td> {{ obj.id }} </td>
<td> {{ obj.name }} </td>
<td> {{ obj.age }} </td>
<td> {{ obj.gender }} </td>
</tr>
</tbody>
</table>
CSS:
#uniquetable thead{
display:block;
width: 100%;
}
#uniquetable tbody{
display:block;
width: 100%;
height: 100px;
overflow-y:overlay;
overflow-x:hidden;
}
#uniquetable tbody tr,#uniquetable thead tr{
width: 100%;
display:table;
}
#uniquetable tbody tr td, #uniquetable thead tr th{
display:table-cell;
width:20% !important;
overflow:hidden;
}
이것도 작동할 것입니다.
#uniquetable tbody {
width:inherit !important;
display:block;
max-height: 400px;
overflow-y:overlay;
}
#uniquetable thead {
width:inherit !important;
display:block;
}
#uniquetable tbody tr, #uniquetable thead tr {
display:inline-flex;
width:100%;
}
#uniquetable tbody tr td, #uniquetable thead tr th {
display:block;
width:20%;
border-top:none;
text-overflow: ellipsis;
overflow: hidden;
max-height:400px;
}
스크롤 테이블을 만드는 것은 항상 어려운 일입니다.이 솔루션은 테이블을 수평 및 수직으로 스크롤할 때 차체의 높이가 고정되어 있어 리더와 차체가 "붙어 붙습니다"(디스플레이 없음: 끈적임).보여주기 위해 "큰" 테이블을 추가했습니다.저는 G-Cyrillus로부터 tbody 디스플레이를 만드는 것에 영감을 받았습니다: block; 하지만 셀의 너비에 관해서는, (헤더와 바디 모두에서) 내부 내용에 의존합니다.따라서 광고와 최소 첫 번째 행 본문 모두에서 각 셀 내부에 특정 너비의 콘텐츠를 추가했습니다(다른 행은 그에 따라 조정됨).
.go-wrapper {
overflow-x: auto;
width: 100%;
}
.go-wrapper table {
width: auto;
}
.go-wrapper table tbody {
display: block;
height: 220px;
overflow: auto;
}
.go-wrapper table thead {
display: table;
}
.go-wrapper table tfoot {
display: table;
}
.go-wrapper table thead tr,
.go-wrapper table tbody tr,
.go-wrapper table tfoot tr {
display: table-row;
}
.go-wrapper table th,
.go-wrapper table td {
white-space: nowrap;
}
.go-wrapper .aw-50 { min-height: 1px; width: 50px; }
.go-wrapper .aw-100 { min-height: 1px; width: 100px; }
.go-wrapper .aw-200 { min-height: 1px; width: 200px; }
.go-wrapper .aw-400 { min-height: 1px; width: 400px; }
/***** Colors *****/
.go-wrapper table {
border: 2px solid red
}
.go-wrapper table thead,
.go-wrapper table tbody,
.go-wrapper table tfoot {
outline: 1px solid green
}
.go-wrapper td {
outline: 1px solid blue
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Template</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<div class="row mt-5 justify-content-md-center">
<div class="col-8">
<div class="go-wrapper">
<table class="table">
<thead>
<tr>
<th><div class="aw-50" ><div class="checker"><span><input type="checkbox" class="styled"></span></div></div></th>
<th><div class="aw-200">Name</div></th>
<th><div class="aw-50" >Week</div></th>
<th><div class="aw-100">Date</div></th>
<th><div class="aw-100">Time</div></th>
<th><div class="aw-200">Project</div></th>
<th><div class="aw-400">Text</div></th>
<th><div class="aw-200">Activity</div></th>
<th><div class="aw-50" >Hours</th>
<th><div class="aw-50" >Pause</div></th>
<th><div class="aw-100">Status</div></th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="aw-50"><div class="checker"><span><input type="checkbox" class="styled"></span></div></div></td>
<td><div class="aw-200">AAAAA</div></td>
<td><div class="aw-50" >15</div></td>
<td><div class="aw-100">07.04.2020</div></td>
<td><div class="aw-100">10:00</div></td>
<td><div class="aw-200">Project 1</div></td>
<td><div class="aw-400">Blah blah blah</div></td>
<td><div class="aw-200">Activity</div></td>
<td><div class="aw-50" >2t</div></td>
<td><div class="aw-50" >30min</div></td>
<td><div class="aw-100">Waiting</div></td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>BBBBB</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>CCCCC</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah Blah blah blah</td>
<td>Activity Activity Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>DDDDD</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>EEEEE</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>FFFFF</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity Activity Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>GGGGG</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>HHHHH</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>IIIII</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>JJJJJ</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>KKKKK</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>LLLLL</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>MMMMM</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>NNNNN</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>OOOOO</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>PPPPP</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>QQQQQ</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>RRRRR</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>SSSSS</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>TTTTT</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>UUUUU</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>VVVVV</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>XXXXX</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>YYYYY</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>ZZZZZ</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>ÆÆÆÆÆ</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>ØØØØØ</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
<tr>
<td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
<td>ÅÅÅÅÅ</td>
<td>15</td>
<td>07.04.2020</td>
<td>10:00</td>
<td>Project 1</td>
<td>Blah blah blah</td>
<td>Activity</td>
<td>2t</td>
<td>30min</td>
<td>Waiting</td>
</tr>
</tbody>
<tfoot>
<tr>
<th><div class="aw-50" ><div class="checker"><span><input type="checkbox" class="styled"></span></div></div></th>
<th><div class="aw-200">Name</div></th>
<th><div class="aw-50" >Week</div></th>
<th><div class="aw-100">Date</div></th>
<th><div class="aw-100">Time</div></th>
<th><div class="aw-200">Project</div></th>
<th><div class="aw-400">Text</div></th>
<th><div class="aw-200">Activity</div></th>
<th><div class="aw-50" >Hours</th>
<th><div class="aw-50" >Pause</div></th>
<th><div class="aw-100">Status</div></th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>저는 제 프로젝트를 위해 같은 해결책을 찾고 있었습니다.이렇게 했어요.
위의 답변 중 하나에서 데이터를 추출하여 시연합니다.
.tableContainer {
max-height: 150px;
overflow-y: scroll;
padding: 0;
margin: 0;
border: 1px solid black;
width: 100%;
}
table {
width: 100%;
}
thead {
position: sticky;
top: 0px;
background-color: white;
}
/* for styling only */
td {
border: 1px solid black;
}<div class="tableContainer">
<table>
<thead>
<th>Invoice Number</th>
<th>Purchaser</th>
<th>Invoice Amount</th>
<th>Invoice Date</th>
</thead>
<tbody>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
<tr>
<td>INV-1233</td>
<td>Dinesh Vaitage</td>
<td>$300</td>
<td>01/12/2017</td>
</tr>
</tbody>
</table>
</div>제 생각에 당신이 하려는 것은 헤더를 고정하고 본문 내용을 스크롤하는 것입니다.콘텐츠를 두 방향으로 스크롤할 수 있습니다.
- 수평: 슬라이더(예: jQuery 슬라이더)를 사용하지 않으면 내용을 수평으로 스크롤할 수 없습니다.이런 경우에는 테이블 사용을 피하는 것이 좋습니다.
- 수직적으로: 당신은 그것을 이룰 수 없을 것입니다.
tbody태그, 할당하기 때문에display:block또는display:inline-block테이블의 레이아웃이 깨집니다.
다음은 다음을 사용하는 솔루션입니다.divs제이에스아이들
HTML:
<div class="wrap_header">
<div class="column">
Name
</div>
<div class="column">
Phone
</div>
<div class="clearfix"></div>
</div>
<div class="wrap_body">
<div class="sliding_wrapper">
<div class="serie">
<div class="cell">
AAAAAA
</div>
<div class="cell">
323232
</div>
<div class="clearfix"></div>
</div>
<div class="serie">
<div class="cell">
BBBBBB
</div>
<div class="cell">
323232
</div>
<div class="clearfix"></div>
</div>
<div class="serie">
<div class="cell">
CCCCCC
</div>
<div class="cell">
3435656
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
CSS:
.wrap_header{width:204px;}
.sliding_wrapper,
.wrap_body {width:221px;}
.sliding_wrapper {overflow-y:scroll; overflow-x:none;}
.sliding_wrapper,
.wrap_body {height:45px;}
.wrap_header,
.wrap_body {overflow:hidden;}
.column {width:100px; float:left; border:1px solid red;}
.cell {width:100px; float:left; border:1px solid red;}
/**
* @info Clearfix: clear all the floated elements
*/
.clearfix:after {
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.clearfix {display:inline-table;}
/**
* @hack Display the Clearfix as a block element
* @hackfor Every browser except IE for Macintosh
*/
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
설명:
당신은 있습니다.sliding wrapper모든 데이터를 포함할 것입니다.
다음 사항에 유의하십시오.
.wrap_header{width:204px;}
.sliding_wrapper,
.wrap_body {width:221px;}
스크롤바의 폭을 고려해야 하기 때문에 17px의 차이가 있습니다.
웹킷이 내부적으로 사용되는 것 같습니다.display: table-row-group를 위해tbody태그. 현재 높이를 설정하는 버그가 있습니다. https://github.com/w3c/csswg-drafts/issues/476
그것이 곧 해결되기를 바랍니다.
그리드를 이용한 멋진 솔루션을 찾았습니다!이것이 제가 사용한 것이고 완벽하게 작동했습니다.
tbody tr, thead tr {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr; // or whatever division you wanna do
}
tbody {
height: 300px; // or whatever height
width: 100%;
overflow-y: auto;
display: block;
}
데모: https://codesandbox.io/s/table-with-inner-body-scroll-hggq7x
다음은 x 및 y 방향으로 이동하는 테이블 스크롤의 좋은 예입니다.반응형 표에는 가로 및 세로 스크롤이 가장 좋습니다.
table, th, tr, td {
border: 1px solid lightgrey;
border-collapse: collapse;
}
tbody {
max-height: 200px;
max-width: 200px;
overflow: auto;
display: block;
table-layout: fixed;
}
tr {
display: table;
}<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<th>
<input type="checkbox">
</th>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<td>2</td>
<td>3</td>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<td>2</td>
<td>3</td>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>언급URL : https://stackoverflow.com/questions/23989463/how-to-set-tbody-height-with-overflow-scroll
반응형
'source' 카테고리의 다른 글
| mysql의 gen_lex_hash.cc 알고리즘을 어떻게 이해합니까? (0) | 2023.08.26 |
|---|---|
| PowerShell 2.0: 원격 세션 중에 Windows 공유 액세스 (0) | 2023.08.26 |
| 입력할 때 HTML 텍스트 입력 필드를 증가시키시겠습니까? (0) | 2023.08.25 |
| 도커 - 이미지 운영 체제 "윈도우"를 이 플랫폼에서 사용할 수 없습니다. (0) | 2023.08.25 |
| Powershell load dll에 오류가 발생했습니다. Add-Type : 파일이나 어셈블리 'WebDriver.dll' 또는 해당 종속성 중 하나를 로드할 수 없습니다.작업이 지원되지 않습니다. (0) | 2023.08.25 |