是否可以使用CSS滚动100%高度的表格内容而不是标题,并仅在tbody内容侧面显示滚动条而不是标题行?谢谢!
我希望现在不会太晚,而且您还活着。自那时以来情况已经改善了很多 :)
您可以使用:
table {
display: inline-grid;
grid-template-areas:
"head-fixed"
"body-scrollable";
}
thead {
grid-area: head-fixed;
}
tbody {
grid-area: body-scrollable;
overflow: auto;
height: calc(100vh - 55px);
}
在JSFiddle上具有100%高度和固定标题的可滚动表格(tbody): http://jsfiddle.net/gengns/p3fzdc5f/
tbody
的方式很酷。说到 width
,你需要修复一个最小值 th:first-of-type, td:first-of-type { min-width: 50px; }
。但是,你可以使用 CSS Grid 并使用不同的 grid-template-areas
来使 th
和 td
占用相同的空间:)也许在这种情况下,你更喜欢避免使用 table
。希望这能帮助到你。 - gengnshttp://www.cssplay.co.uk/menu/tablescroll.html
他们仍然需要额外的HTML标记来实现,第二个表格有效地使用了嵌套表格,但回退/普通HTML看起来像一个普通的平面表格。<html style="height: 100%">
<head>
<meta charset=utf-8 />
<title>Fixed Header in table</title>
<!-- Reset browser defaults -->
<link rel="stylesheet" href="reset.css">
</head>
<body style="height: 100%">
<table style="display: flex; height: 100%; flex-direction: column">
<thead>
<tr>
<td>HEADER<br/>------------</td>
</tr>
</thead>
<tbody style="flex: 1; overflow: auto">
<tr>
<td>
<div>
CONTENT - START<br/>
<script>
for (var i=0 ; i<1000 ; ++i) {
document.write(" Very long content!");
}
</script>
<br/>CONTENT - END
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
这很简单。以下是您想要做的事情:
CSS:
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
html, body{ width: 100%; height: 100%;}
table{
width: 100%;
height: 100%;
background-color: #aaa;
}
tbody{
width: 100%;
height: 100%;
-display: block;
background-color: #ccc;
overflow-y: scroll;
overflow-x: hidden;
}
td{
width: 100px;
height: 200px;
background-color: #eee;
}
</style>
HTML:
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
overflow-x: hidden;
overflow-y: scroll;
我有一个类似的问题,只想让标题下的内容滚动并保留100%的剩余高度。以下是我的解决方法:
http://jsfiddle.net/ajkochanowicz/YDjsE/
这对于简单的用例可行。
#container {
border: 1px solid red;
width: 200px;
height: 250px; /* This can be any height and everything fills in */
padding-top: 55px;
}
#something-else {
height: 55px;
width: 200px;
background-color: green;
margin-top:-55px;
}
#overflow {
border: 1px solid blue;
width:198px;
overflow-y: auto;
height: 100%;
}
table{
width: 100%;
height: 400px;
background-color: #aaa;
}
tbody{
background-color: #CCCCCC;
display: block;
height: 400px;
overflow-x: hidden;
overflow-y: scroll;
width: 100%;
}
td{
width: 100px;
height: 30px;
background-color: #eee;
}
thead {
display: block;
height: 30px;
width: 100%;
}
在我的火狐浏览器上可以运行,其他地方没有测试过.. :)