我必须让我的 html 表格垂直滚动。
我在标签上使用了下面的代码，tbody但它对我不起作用
<tbody style="height: 100px; overflow: auto">
问问题
203957 次
9 回答
106
你为什么不把你的桌子放在一个div里？
<div style="height:100px;overflow:auto;">
... Your code goes here ...
</div>
于 2012-06-22T08:07:22.113 回答
17
只需将 display:block 添加到 thead > tr 和 tbody。检查下面的例子
于 2012-06-22T08:15:16.700 回答
14
试试这个..它正在工作......这里是JSBIN
table tbody { height:300px; overflow-y:scroll; display:block; }
table thead { display:block; }
于 2012-06-22T08:15:40.977 回答
5
做到这一点的最好方法是将您的表格严格分成两个不同的表格 - 标题和正文：
<div class="header">
<table><tr><!-- th here --></tr></table>
</div>
<div class="body">
<table><tr><!-- td here --></tr></table>
</div>
.body {
height: 100px;
overflow: auto
}
如果您的表格宽度很大（大于屏幕宽度），那么您必须为水平滚动标题和正文同步添加滚动事件。
你不应该接触带有 CSS 属性display和overflow的表格标签（table、tbody、thead、tfoot、tr） 。处理 DIV 包装器更可取。
于 2012-06-22T08:07:34.410 回答
3
jQuery 插件可能是最好的选择。http://farinspace.com/jquery-scrollable-table-plugin/
要修复标题，您可以查看此帖子
修复 GridView 或 HtmlTable 的标题（可能存在仅适用于 IE 的问题）
用于修复标题的 CSS
div#gridPanel
{
width:900px;
overflow:scroll;
position:relative;
}
div#gridPanel th
{
top: expression(document.getElementById("gridPanel").scrollTop-2);
left:expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
position: relative;
z-index: 20;
}
<div height="200px" id="gridPanel" runat="server" scrollbars="Auto" width="100px">
table..
</div>
或者
非常好的帖子在这里
或者
不，这是不可能的，但您可以使用 div 并将表格放入 div
<div style="height: 100px; overflow: auto">
<table style="height: 500px;">
...
</table>
</div>
于 2012-06-22T08:06:42.730 回答
2
嗨试试这个溢出-y：滚动。我希望它可以帮助你
于 2012-06-22T08:06:37.600 回答
2
这是我的解决方案（在 Spring 中使用 Thymeleaf 和 jQuery）：
html:
<!DOCTYPE html>
<html
xmlns:th="http://www.thymeleaf.org"
xmlns:tiles="http://www.thymeleaf.org">
<body>
<div id="objects" th:fragment="ObjectList">
<br/>
<div id='cap'>
<span>Objects</span>
</div>
<div id="hdr">
<div>
<div class="Cell">Name</div>
<div class="Cell">Type</div>
</div>
</div>
<div id="bdy">
<div th:each="object : ${objectlist}">
<div class="Cell" th:text="${object.name}">name</div>
<div class="Cell" th:text="${object.type}">type</div>
</div>
</div>
</div>
</body>
</html>
CSS：
@CHARSET "UTF-8";
#cap span {
display: table-caption;
border:2px solid;
font-size: 200%;
padding: 3px;
}
#hdr {
display:block;
padding:0px;
margin-left:0;
border:2px solid;
}
#bdy {
display:block;
padding:0px;
margin-left:0;
border:2px solid;
}
#objects #bdy {
height:300px;
overflow-y: auto;
}
#hdr div div{
margin-left:-3px;
margin-right:-3px;
text-align: right;
}
#hdr div:first-child {
text-align: left;
}
#bdy div div {
margin-left:-3px;
margin-right:-3px;
text-align: right;
}
#bdy div div:first-child {
text-align: left;
}
.Cell
{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
javascript:
$(document).ready(function(){
var divs = ['#objects'];
divs.forEach(function(div)
{
if ($(div).length > 0)
{
var widths = [];
var totalWidth = 0;
$(div+' #hdr div div').each(function() {
widths.push($(this).width())
});
$(div+' #bdy div div').each(function() {
var col = $(this).index();
if ( $(this).width() > widths[col] )
{
widths[col] = $(this).width();
}
});
$(div+' #hdr div div').each(function() {
var newWidth = widths[$(this).index()]+5;
$(this).css("width", newWidth);
totalWidth += $(this).outerWidth();
});
$(div+' #bdy div div').each(function() {
$(this).css("width", widths[$(this).index()]+5);
});
$(div+' #hdr').css("width", totalWidth);
$(div+' #bdy').css("width", totalWidth+($(div+' #bdy').css('overflow-y')=='auto'?15:0));
}
})
});
于 2014-12-03T15:59:49.653 回答
1
这是一个解决方法。
[编辑]
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<table cellspacing="1" width="100%" bgcolor="#cccccc">
<thead>
<tr>
<td bgcolor="#ffffff" width="70px">
</td>
<td class="csstablelisttd" width="70px">
<b>Time Slot </b>
</td>
<td class="csstablelisttd">
<b> Patient Name</b>
</td>
</tr>
</thead>
</table>
<!-- THIS GIVES THE SCROLLER -->
<div style="height: 500px; overflow-y: auto">
<table id="tableAppointment" cellspacing="1" width="100%" bgcolor="#cccccc">
<tbody>
<tr>
<td class="csstablelisttd" valign="top" width="70px">
8:00AM
</td>
<td class="csstablelisttd" width="70px">
0
</td>
<td class="csstablelisttd">
<span>Name 1</span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
15
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
30
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
45
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd" valign="top" width="90px">
9:00AM
</td>
<td class="csstablelisttd">
0
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
15
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
30
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
45
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd" valign="top" width="90px">
10:00AM
</td>
<td class="csstablelisttd">
0
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
15
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
30
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
45
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd" valign="top" width="90px">
11:00AM
</td>
<td class="csstablelisttd">
0
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
15
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
30
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
45
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd" valign="top" width="90px">
12:00PM
</td>
<td class="csstablelisttd">
0
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
15
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
30
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
45
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd" valign="top" width="90px">
01:00PM
</td>
<td class="csstablelisttd">
0
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
15
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
30
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
45
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd" valign="top" width="90px">
02:00PM
</td>
<td class="csstablelisttd">
0
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
15
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
30
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
45
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd" valign="top" width="90px">
03:00PM
</td>
<td class="csstablelisttd">
0
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
15
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
30
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
45
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd" valign="top" width="90px">
04:00PM
</td>
<td class="csstablelisttd">
0
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
15
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
30
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
45
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd" valign="top" width="90px">
05:00PM
</td>
<td class="csstablelisttd">
0
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
15
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
30
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
45
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd" valign="top" width="90px">
06:00PM
</td>
<td class="csstablelisttd">
0
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
15
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
30
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
45
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd" valign="top" width="90px">
07:00PM
</td>
<td class="csstablelisttd">
0
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
15
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
30
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
45
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd" valign="top" width="90px">
08:00PM
</td>
<td class="csstablelisttd">
0
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
于 2012-06-22T08:10:10.490 回答
0
我和这个打了一段时间。我的目标是创建一个带有标题的表格，其中每个标题列的宽度与相应的正文列相同，并且是适合数据所需的最小大小。正文数据也可以在标题下方滚动。
我通过使用 div 而不是表格解决了这个问题。每个“表”都是一个 div，标题是 div 的 div，主体是 div 的 div。我使用了上面@sushil 指示的样式。我添加了一些 javascript/jQuery 来平衡列。也许20-30行。
不幸的是，我丢失了代码，不得不重新构建它。我知道这有点老了，但也许它会帮助别人。
于 2014-11-30T12:48:50.390 回答