如何在 html 表格上显示滚动条
我正在编写一个页面,我需要一个 html 表来维持设定的大小。我需要表顶部的标题始终保留在那里,但我还需要表的主体滚动,无论向表中添加了多少行。
我希望它看起来像这个网址中的方法2: http://www.cssplay.co .uk/menu/tablescroll.html
我尝试这样做,但没有出现滚动条:
tbody {
height: 80em;
overflow: scroll;
}
<table border=1 id="qandatbl" align="center">
<tr>
<th class="col1">Question No</th>
<th class="col2">Option Type</th>
<th class="col1">Duration</th>
</tr>
<tbody>
<tr>
<td class='qid'></td>
<td class="options"></td>
<td class="duration"></td>
</tr>
</tbody>
</table>
I am writing a page where I need an html table to maintain a set size. I need the headers at the top of the table to stay there at all times but I also need the body of the table to scroll no matter how many rows are added to the table.
I want it to look like method 2 in this url: http://www.cssplay.co.uk/menu/tablescroll.html
I have tried doing this but no scrollbar appears:
tbody {
height: 80em;
overflow: scroll;
}
<table border=1 id="qandatbl" align="center">
<tr>
<th class="col1">Question No</th>
<th class="col2">Option Type</th>
<th class="col1">Duration</th>
</tr>
<tbody>
<tr>
<td class='qid'></td>
<td class="options"></td>
<td class="duration"></td>
</tr>
</tbody>
</table>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(10)
像这样的东西吗?
http://jsfiddle.net/TweNm/
这个想法是包装
< /code> 位于非静态定位的
中,它具有
overflow:auto
CSS 属性。然后将元素绝对定位在中。
Something like this?
http://jsfiddle.net/TweNm/
The idea is to wrap the
<table>
in a non-statically positioned<div>
which has anoverflow:auto
CSS property. Then position the elements in the<thead>
absolutely.您必须将
插入具有固定大小的
中,并且采用
样式必须设置
overflow:scroll
。更新:
原来的答案是10年前写的。如今,有很多优秀的 UI 组件用于表视图并以正确的方式显示。因此,我的建议是选择这些免费或付费组件之一,以确保您已经支持这些组件中已实现的大量边缘情况。
You have to insert your
<table>
into a<div>
that it has fixed size, and in<div>
style you have to setoverflow: scroll
.Update:
The original answer was written 10 years ago. These days there are lots of good UI components for table views and showing in proper ways. So my suggestion is to go for one of these free or paid components to make sure you already support lots of edge cases which is already implemented in these components.
接受的答案提供了一个很好的起点,但是如果您调整框架大小,更改列宽,甚至更改表数据,标题将以各种方式变得混乱。我见过的所有其他示例都有类似的问题,或者对表格的布局施加了一些严格的限制。
不过,我想我终于解决了所有这些问题。它使用了很多 CSS,但最终产品与普通表格一样可靠且易于使用。
下面是一个示例,其中包含复制 OP 引用的表所需的所有功能: jsFiddle
必须更改颜色和边框以使其与参考相同。 CSS 注释中提供了有关如何进行此类更改的信息。
这是代码:
The accepted answer provided a good starting point, but if you resize the frame, change the column widths, or even change the table data, the headers will get messed up in various ways. Every other example I've seen has similar issues, or imposes some serious restrictions on the table's layout.
I think I've finally got all these problems solved, though. It took a lot of CSS, but the final product is about as reliable and easy to use as a normal table.
Here's an example that has all the required features to replicate the table referenced by the OP: jsFiddle
The colors and borders would have to be changed to make it identical to the reference. Information on how to make those kinds of changes is provided in the CSS comments.
Here's the code:
不知道为什么没有人提到只使用元素的内置粘性标题样式。对我来说效果很好。
如果您需要响应式(或类似),请在 @media 中设置最小宽度。
请参阅 表格标题位置:sticky 或 定位粘性标题和表格标题
Not sure why no one mentioned to just use the built-in sticky header style for elements. Worked great for me.
Put a min-width on the in @media if you need to make responsive (or similar).
see Table headers position:sticky or Position Sticky and Table Headers
我通过将内容分成两个表解决了这个问题。
一张表是标题行。
秒也是
标记,但由
包裹,具有静态高度和溢出滚动。
I resolved this problem by separating my content into two tables.
One table is the header row.
The seconds is also
<table>
tag, but wrapped by<div>
with static height and overflow scroll.值得注意的是,根据您的目的(我的是搜索栏的自动填充结果),您可能希望高度可变,并且滚动条仅在高度超过该高度时才存在。
如果需要,请将
height: x;
替换为max-height: x;
,并将overflow:scroll
替换为overflow:auto
。此外,如果您愿意,您可以使用overflow-x和overflow-y,显然同样的东西可以水平地使用width:x;
Worth noting, that depending on your purpose (mine was the autofill results of a searchbar) you may want the height to be changeable, and for the scrollbar to only exist if the height exceeds that.
If you want that, replace
height: x;
withmax-height: x;
, andoverflow:scroll
withoverflow:auto
.Additionally, you can use
overflow-x
andoverflow-y
if you want, and obviously the same thing works horizontally withwidth : x;
如果您遇到所有提到的解决方案都不起作用的情况(就像我遇到的那样),请执行以下操作:
像这样,在您的
HTML
中然后在您的
CSS
中设置第二个表格的父级的样式以允许垂直滚动If you get to the point where all the mentioned solutions don't work (as it got for me), do this:
Like this, in your
HTML
Then style the second table's parent to allow vertical scroll, in your
CSS
很简单,只需将表格包装在具有
overflow-y:scroll;
和overflow-x:scroll
属性的 div 中,并使 div 的宽度和长度更小比桌子。它会起作用的!
Very easy, just wrap the table in a div that has
overflow-y:scroll;
andoverflow-x:scroll
properties, and make the div have a width and length smaller than the table.IT WILL WORK!!!
CSS:
div{ 溢出-y:滚动;溢出-x:滚动;宽度:20px;高度:30px; } 表格{ 宽度:50px;高度:50px;您
可以将表格和表格周围的 DIV 设置为您想要的任何大小,只需确保 DIV 小于表格即可。
您必须将表包含在 DIV 内。
The CSS:
div{ overflow-y:scroll; overflow-x:scroll; width:20px; height:30px; } table{ width:50px; height:50px; }
You can make the table and the DIV around the table be any size you want, just make sure that the DIV is smaller than the table.
You MUST contain the table inside of the DIV.
只需添加到表中
样式=“溢出-x:自动;”`
just add on table
style="overflow-x:auto;"`