如何使html表格垂直滚动
我必须让我的html表格可以垂直滚动。
我用下面的代码在tbody
标签,但它不工作对我来说
<tbody style="height: 100px; overflow: auto">
你为什么不把你的表在一个div?
<div style="height:100px;overflow:auto;">
... Your code goes here ...
</div>
+1简单但非常有效 –
div没有表语义,也没有解决 - 除了多个div之外 - 表格标题后面的滚动表体的问题。 – Javarome
嗨尝试用这种溢出-Y:滚动。我希望它可以帮助你
overflow-y不是已知的css属性名称,并且失败 –
使用div而不是表格 – muthu
jQuery插件可能是最好的选择。 http://farinspace.com/jquery-scrollable-table-plugin/
要固定头部,你可以检查这个帖子
Fixing Header of GridView or HtmlTable(THRE可能是问题,这应该在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>
或
很好的帖子在这里
How to Freeze Columns Using Javascript and HTML.
或
没有它不是可能的,但你可以利用的股利,并把表格
<div style="height: 100px; overflow: auto">
<table style="height: 500px;">
...
</table>
</div>
它的工作原理但标题也滚动垂直我必须使tbody滚动与固定标题thead ..如果你想html代码,然后我把jsbin。 –
它不是gridvies其只是html表..在CSS中获取错误表达式无效属性顶部 –
@Nikhil - 这将工作在IE浏览器只有它更好你使用jQuery插件链接是由我在顶部anwwer给予将帮助你很容易实现你的任务。 –
要做到这一点你的表是严格分开成两个不同的表,最好的方法 - 标题和正文:
<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
}
如果你的表中有一个大的宽度(比屏幕宽度以上),那么你必须为水平滚动标题和正文同步添加滚动事件。
你不应该碰表标签(表,TBODY,THEAD,TFOOT,TR)与CSS属性显示和溢出。处理DIV包装是更可取的。
这是一个工作。
[编辑]
<!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=
你为什么不把你的表在一个div?
<div style="height:100px;overflow:auto;">
... Your code goes here ...
</div>
+1简单但非常有效 –
div没有表语义,也没有解决 - 除了多个div之外 - 表格标题后面的滚动表体的问题。 – Javarome
jQuery插件可能是最好的选择。 http://farinspace.com/jquery-scrollable-table-plugin/
要固定头部,你可以检查这个帖子
Fixing Header of GridView or HtmlTable(THRE可能是问题,这应该在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>
或
很好的帖子在这里
How to Freeze Columns Using Javascript and HTML.
或
没有它不是可能的,但你可以利用的股利,并把表格
<div style="height: 100px; overflow: auto">
<table style="height: 500px;">
...
</table>
</div>
它的工作原理但标题也滚动垂直我必须使tbody滚动与固定标题thead ..如果你想html代码,然后我把jsbin。 –
它不是gridvies其只是html表..在CSS中获取错误表达式无效属性顶部 –
@Nikhil - 这将工作在IE浏览器只有它更好你使用jQuery插件链接是由我在顶部anwwer给予将帮助你很容易实现你的任务。 –
要做到这一点你的表是严格分开成两个不同的表,最好的方法 - 标题和正文:
<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
}
如果你的表中有一个大的宽度(比屏幕宽度以上),那么你必须为水平滚动标题和正文同步添加滚动事件。
你不应该碰表标签(表,TBODY,THEAD,TFOOT,TR)与CSS属性显示和溢出。处理DIV包装是更可取的。
这是一个工作。
[编辑]
<!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>
可以把你的整个html中的答案.in jsfiddle我unabele得到html –
ru there.put html –
道歉,误读你以前的评论,现在更新了答案 – Rishabh
试试这个..这是工作...这里JSBIN
table tbody { height:300px; overflow-y:scroll; display:block; }
table thead { display:block; }
这是行不通的。在表格单元格周围添加边框,你会看到为什么。http://jsbin.com/iveroj/114/edit – Zilk
该方法将工作如果你把滚动条的宽度作为标题的一部分,这可能比它的价值更麻烦。基本上你需要使标题的宽度比主体宽21px,以考虑滚动条宽度至少在Windows 7中运行的Chrome 34.0.1847.131 m中。 – nodonoghue
我与这一个打了一阵子。我的目标是创建一个带有标题的表格,其中每个标题列的宽度与相应的正文列相同,并且是适合数据所需的最小大小。身体数据也可以在标题下滚动。
我通过使用div而不是表格解决了这个问题。每个“表”都是一个div,头是div的div,body是div的div。我使用了上面@sushil所示的样式。我添加了一些javascript/jQuery来平衡列。也许20-30行。
不幸的是我丢失了代码,不得不重建它。我知道这有点旧,但也许会帮助别人。
这里是我的解决方案(在春季与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));
}
})
});
也许你应该使用改为
使用div包装你的表,并在div包装表中定义溢出声明。 – Tarun
你可以通过使用@Ashlash和我的答案做到这一点.. –
回答
你为什么不把你的表在一个div?
+1简单但非常有效 –
div没有表语义,也没有解决 - 除了多个div之外 - 表格标题后面的滚动表体的问题。 – Javarome
嗨尝试用这种溢出-Y:滚动。我希望它可以帮助你
overflow-y不是已知的css属性名称,并且失败 –
使用div而不是表格 – muthu
jQuery插件可能是最好的选择。 http://farinspace.com/jquery-scrollable-table-plugin/
要固定头部,你可以检查这个帖子
Fixing Header of GridView or HtmlTable(THRE可能是问题,这应该在IE浏览器只)
CSS固定头
或
很好的帖子在这里
How to Freeze Columns Using Javascript and HTML.
或
没有它不是可能的,但你可以利用的股利,并把表格
它的工作原理但标题也滚动垂直我必须使tbody滚动与固定标题thead ..如果你想html代码,然后我把jsbin。 –
它不是gridvies其只是html表..在CSS中获取错误表达式无效属性顶部 –
@Nikhil - 这将工作在IE浏览器只有它更好你使用jQuery插件链接是由我在顶部anwwer给予将帮助你很容易实现你的任务。 –
要做到这一点你的表是严格分开成两个不同的表,最好的方法 - 标题和正文:
如果你的表中有一个大的宽度(比屏幕宽度以上),那么你必须为水平滚动标题和正文同步添加滚动事件。
你不应该碰表标签(表,TBODY,THEAD,TFOOT,TR)与CSS属性显示和溢出。处理DIV包装是更可取的。
+1,尽管使用“body”和“header”作为css类会让我觉得有点奇怪! – Andomar
将表格标题与其内容分离起来似乎是不好的做法。这就是'tbody'和'thead'的作用。 – You
如果没有明确定义每个宽度,这些列将不会正确排列。这似乎不是一个好方法。 –
这是一个工作。
http://jsfiddle.net/JJV59/2/
[编辑]
可以把你的整个html中的答案.in jsfiddle我unabele得到html –
ru there.put html –
道歉,误读你以前的评论,现在更新了答案 – Rishabh
只需添加显示:块到THEAD> tr和TBODY。检查下面的例子
http://www.imaputz.com/cssStuff/bigFourVersion.html
你好我很愚蠢。我如何使用这个例子?所有我看到的是该网站上的工作表:( – stackPusher
试试这个..这是工作...这里JSBIN
这是行不通的。在表格单元格周围添加边框,你会看到为什么。http://jsbin.com/iveroj/114/edit – Zilk
该方法将工作如果你把滚动条的宽度作为标题的一部分,这可能比它的价值更麻烦。基本上你需要使标题的宽度比主体宽21px,以考虑滚动条宽度至少在Windows 7中运行的Chrome 34.0.1847.131 m中。 – nodonoghue
我与这一个打了一阵子。我的目标是创建一个带有标题的表格,其中每个标题列的宽度与相应的正文列相同,并且是适合数据所需的最小大小。身体数据也可以在标题下滚动。
我通过使用div而不是表格解决了这个问题。每个“表”都是一个div,头是div的div,body是div的div。我使用了上面@sushil所示的样式。我添加了一些javascript/jQuery来平衡列。也许20-30行。
不幸的是我丢失了代码,不得不重建它。我知道这有点旧,但也许会帮助别人。
这里是我的解决方案(在春季与Thymeleaf和jQuery):
HTML:
CSS:
的javascript:
相关问题