这支笔的目的是使表的主体滚动而不滚动标题。
该部分有效,但是我无法使标头散布在HTML正文中以匹配数据行。我究竟做错了什么?
在此先感谢您的帮助。
body {
margin: 0;
padding: 0;
height: 100vh;
}
div {
background-color: green;
width: 100%;
height: 100%
}
table {
width: 100%;
background-color: red;
height: 100%;
display: flex;
flex-direction: column;
}
thead {
background-color: purple;
width: 100%;
display: block;
}
thead tr {
background-color: orange;
width: 100%;
display: block;
}
;
thead tr td {
min-width: 30%;
width: 30%;
display: inline-block;
}
tbody {
flex: 1;
background-color: blue;
overflow-y: auto;
display: block
}
tbody tr {
background-color: aqua;
width: 100%;
display: block;
}
tbody tr td {
min-width: 30%;
width: 30%;
display: inline-block;
}
<div>
<table>
<thead>
<tr>
<td>Header A</td>
<td>Header B</td>
<td>Header C</td>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>
</div>
答案 0 :(得分:0)
简单语法错误。您在第5行的末尾有一个;
。
删除它并享受您的餐桌。
答案 1 :(得分:0)
以display: flex
样式使用justify-content: space-around
和thead tr
。
body {
margin: 0;
padding: 0;
height: 100vh;
}
div {
background-color: green;
width: 100%;
height: 100%;
}
table {
width: 100%;
background-color: red;
height: 100%;
display: flex;
flex-direction: column;
}
thead {
background-color: purple;
width: 100%;
display: block;
}
thead tr {
background-color: orange;
width: 100%;
overflow: hidden;
display: flex;
justify-content: space-around;
}
thead tr td {
min-width: 30%;
width: 30%;
display: inline-block;
}
tbody {
flex: 1;
background-color: blue;
overflow-y: auto;
display: block;
}
tbody tr {
background-color: aqua;
width: 100%;
display: block;
}
tbody tr td {
min-width: 30%;
width: 30%;
display: inline-block;
}
<html>
<body>
<div>
<table>
<thead>
<tr>
<td>Header A</td>
<td>Header B</td>
<td>Header C</td>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
答案 2 :(得分:0)
我已经设法获得一个简单的滚动表和固定的标题,并使用显示阻止项来控制列宽。
在此处http://jsfiddle.net/joshmoto/xjq41yng/4/中查看jsfiddle
table {
width: 100%; /* your table width */
background: blue;
border: 0;
border-spacing: 0;
}
thead,
tbody,
tr,
td,
th {
display: block;
padding: 0;
}
tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
thead th {
height: 30px;
background: orange;
}
tbody td {
background: aqua;
}
tbody {
height: 120px; /* fixed tbody height to show scroll example */
overflow-y: auto;
}
tbody td,
thead th {
width: 30%; /* your column width */
float: left;
}
<table>
<thead>
<tr>
<th>Header A</th>
<th>Header B</th>
<th>Header C</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>