我面临的问题，而设置高度宽度溢出滚动。
<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>
在这里参观我的小提琴
我想要表B像表A一样溢出滚动。
任何帮助都将不胜感激。
非常感谢,
M。
另一种方法是将表格包装在一个可滚动的元素中，并将标题单元格设置为固定在顶部。
这种方法的优点是不需要更改主体上的显示，可以让浏览器来计算列宽，同时保持标题单元格宽度与数据单元格列宽度一致。
/* 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>
Making scrolling tables is always a challenge. This is a solution where the table is scrolled both horizontally and vertically with fixed height on tbody making theader and tbody "stick" (without display: sticky). I've added a "big" table just to show.
I got inspiration from G-Cyrillus to make the tbody display:block;
But when it comes to width of a cell (both in header and body), it's depending on the inside content. Therefore I added content with specific width inside each cell, both in thead and minimum first row in tbody (the other rows adapt accordingly)
.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>
