如何使html表格垂直滚动
看到jsbin
我必须让我的HTML表格垂直滚动。
我在tbody标签上使用了下面的代码，但是它不适用于我
<tbody style="height: 100px; overflow: auto">
你为什么不把你的桌子放在一个div里？
<div style="height:100px;overflow:auto;"> ... Your code goes here ... </div>
只需将display：block添加到thead> tr和tbody。 检查下面的例子
试试这个..这是工作…在这里JSBIN
table tbody { height:300px; overflow-y:scroll; display:block; } table thead { display:block; }
最好的办法是严格把你的表分成两个不同的表 – 标题和正文：
<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属性显示和溢出的表标签（table，tbody，thead，tfoot，tr）。 处理DIV包装是更可取的。
jQuery插件可能是最好的select。 http://farinspace.com/jquery-scrollable-table-plugin/
要修复标题，你可以检查这个post
修复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>
要么
很好的post在这里
如何使用JavaScript和HTML来冻结列。
要么
没有它是不可能的，但你可以利用div和把表格分区
<div style="height: 100px; overflow: auto"> <table style="height: 500px;"> ... </table> </div>
您好尝试用这个overflow-y：scroll。 我希望它可以帮助你
这是我的解决scheme（在Thymeleaf和jQuery的Spring中）：
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)); } }) });
这是一个工作。
[编辑]
<!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>
我与这个战斗了一段时间。 我的目标是创build一个带有标题的表格，其中每个标题列的宽度与相应的正文列相同，并且是适合数据所需的最小大小。 身体数据也可以在标题下面滚动。
我通过使用div而不是表格来解决这个问题。 每个“表”是一个div，头是div的div，body是div的div。 我使用上面的@sushil所示的样式。 我添加了一些javascript / jQuery来平衡列。 也许20-30行。
不幸的是我丢失了代码，不得不重build它。 我知道这有点旧，但也许会帮助别人。
