如何将滚动条添加到HTML5表格？
我有一个HTML5表格，我想添加一个滚动条。 我想要表格显示十行，然后用户可以向下滚动查看其他歌曲。 我怎样才能添加滚动条？
这是我在HTML5中的表格的代码：
<table id="my_table" table border="5"> <tr> <th>URL</th> </tr> <tr> <td>http://www.youtube.com/embed/evuSpI2Genw</td> </tr> <tr> <td>http://www.youtube.com/embed/evuSpI2Genw</td> </tr> </table> 这是我的CSS代码：
#my_table { border-radius: 20px; background-color: transparent; color: black; width: 500px; text-align: center; }
如果你有标题到你的表列，你不想滚动这些标题，那么这个解决scheme可以帮助你：
这个解决scheme需要table元素中的thead和tbody标签。
table.tableSection { display: table; width: 100%; } table.tableSection thead, table.tableSection tbody { float: left; width: 100%; } table.tableSection tbody { overflow: auto; height: 150px; } table.tableSection tr { width: 100%; display: table; text-align: left; } table.tableSection th, table.tableSection td { width: 33%; }
工作小提琴
有评论
注意 ：如果您确定垂直滚动条总是存在，那么您可以使用css3 calc属性使该单元格与tbody单元格alignment。
table.tableSection thead { padding-right:18px; /* 18px is approx. value of width of scroll bar */ width: calc(100% - 18px); }
您可以通过使用javascript检测滚动条的存在并应用上述样式来做同样的事情。
而不是假定为固定宽度的列。
CSS
table.tableSection { display: table; width: 100%; } table.tableSection thead, table.tableSection tbody { width: 100%; } table.tableSection thead { overflow-y: scroll; display: table; table-layout: fixed; width: calc(100% - 16px); /* assuming scrollbar width as 16px */ } table.tableSection tbody { overflow: auto; height: 150px; display: block; } table.tableSection tr { width: 100%; text-align: left; display: table; table-layout: fixed; }
工作小提琴
这是我多次使用过的技术。 它最初是基于这个小提琴的一些修改。 这也是stream体和列的宽度可以通过添加一个宽度的样式到<th> 。
/* this is for the main container of the table, also sets the height of the fixed header row */ .headercontainer { position: relative; border: 1px solid #222; padding-top: 37px; background: #000; } /* this is for the data area that is scrollable */ .tablecontainer { overflow-y: auto; height: 200px; background: #fff; } /* remove default cell borders and ensures table width 100% of its container*/ .tablecontainer table { border-spacing: 0; width:100%; } /* add a thin border to the left of cells, but not the first */ .tablecontainer td + td { border-left:1px solid #eee; } /* cell padding and bottom border */ .tablecontainer td, th { border-bottom:1px solid #eee; padding: 10px; } /* make the default header height 0 and make text invisible */ .tablecontainer th { height: 0px; padding-top: 0; padding-bottom: 0; line-height: 0; visibility: hidden; white-space: nowrap; } /* reposition the divs in the header cells and place in the blank area of the headercontainer */ .tablecontainer th div{ visibility: visible; position: absolute; background: #000; color: #fff; padding: 9px 10px; top: 0; margin-left: -10px; line-height: normal; border-left: 1px solid #222; } /* prevent the left border from above appearing in first div header */ th:first-child div{ border: none; } /* alternate colors for rows */ .tablecontainer tbody tr:nth-child(even){ background-color: #ddd; }
<div class="headercontainer"> <div class="tablecontainer"> <table> <thead> <tr> <th> Table attribute name <div>Table attribute name</div> </th> <th> Value <div>Value</div> </th> <th> Description <div>Description</div> </th> </tr> </thead> <tbody> <tr> <td>align</td> <td>left, center, right</td> <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td> </tr> <tr> <td>bgcolor</td> <td>rgb(x,x,x), #xxxxxx, colorname</td> <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td> </tr> <tr> <td>border</td> <td>1,""</td> <td>Specifies whether the table cells should have borders or not</td> </tr> <tr> <td>cellpadding</td> <td>pixels</td> <td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td> </tr> <tr> <td>cellspacing</td> <td>pixels</td> <td>Not supported in HTML5. Specifies the space between cells</td> </tr> <tr> <td>frame</td> <td>void, above, below, hsides, lhs, rhs, vsides, box, border</td> <td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td> </tr> <tr> <td>rules</td> <td>none, groups, rows, cols, all</td> <td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td> </tr> <tr> <td>summary</td> <td>text</td> <td>Not supported in HTML5. Specifies a summary of the content of a table</td> </tr> <tr> <td>width</td> <td>pixels, %</td> <td>Not supported in HTML5. Specifies the width of a table</td> </tr> </tbody> </table> </div> </div>
自问题提出以来，一年多左右的时间过去了，但我对答案并不满意。 我弄了一会儿，这是一个代码：
- 在IE8 +和所有其他浏览器中工作;
- 很容易理解;
- 将单元格边界完美地排列（固定宽度的单元格）;
- 在身体滚动的同时修复头部;
- 自动适应触摸屏。
现场演示： http : //jsbin.com/bagaro/1/edit?html,output 。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Scrollabe table</title> <!-- Substantially simplified and improved version of the table on http://www.cssbakery.com/2010/12/css-scrolling-tables-with-fixed.html --> <script> if ('ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch)) { document.documentElement.className += ' touchScreen'; } </script> <style> /* BASICS: */ * { padding: 0; margin: 0; box-sizing: border-box; /* in case block elements are used inside table cells */ } html { font-size: 62.5%; /* standardizes older IEs */ } body { font: normal 1.3em Verdana; /* = 13px */ } table { border-collapse: collapse; table-layout: fixed; empty-cells: show; } td { border: 1px solid black; padding: 4px; } /* SCROLL TABLE ESSENTIALS (+ SOME ADDITIONAL CSS): */ div#scrollTableContainer { width: 617px; margin: 40px; /* just for presentation purposes */ border: 1px solid black; } .touchScreen div#scrollTableContainer { width: 600px; /* touch devices do not form scrollbars (= 17 px wide) */ } #tHeadContainer { background: #CC3600; color: white; font-weight: bold; } #tBodyContainer { height: 240px; overflow-y: scroll; } .touchScreen #tBodyContainer { -webkit-overflow-scrolling: touch; /* smooths scrolling on touch screens */ } /* FINER LAYOUT MATTERS: */ tr:first-child td { border-top: 0; } #tBody tr.lastRow td { border-bottom: 0; } td:first-child { min-width: 108px; /* Firefox needs min- and max-widths */ max-width: 108px; border-left: 0; } td:first-child + td { min-width: 125px; max-width: 125px; } td:first-child + td + td { min-width: 90px; max-width: 90px; } td:first-child + td + td + td { min-width: 95px; max-width: 95px; } td:first-child + td + td + td + td { width: 180px; /* here, Firefox messes up with only min- and max-widths */ border-right: 0; } /* AND SOME CSS TO INFORM TOUCH SCREEN USERS: */ p#touchDeviceText { display: none; } .touchScreen p#touchDeviceText { display: block; } </style> </head> <body> <p id="touchDeviceText">This table is scrollable</p> <div id="scrollTableContainer"> <div id="tHeadContainer"> <table id="tHead"> <tr> <td>Name</td> <td>Operator</td> <td>Began operation</td> <td>Tonnage</td> <td>Status</td> </tr> </table> </div><!-- tHeadContainer --> <div id="tBodyContainer"> <table id="tBody"> <tr> <td>Seabourne Sun</td> <td>Seabourn Cruise Line</td> <td>1988</td> <td>?</td> <td>Ended service in 2002, currently operating as Prinsendam</td> </tr> <tr> <td>Adventures of the Seas</td> <td>Royal Caribbean International</td> <td>2001</td> <td>138,000</td> <td>Operating</td> </tr> <tr> <td>Oceanic Independence</td> <td>American Hawaiian Cruises / American Global Line</td> <td>1974</td> <td>23,719</td> <td>Named formerly (1951-1974) and subsequently renamed (1982-2006) the Independence, renamed the Oceanic (2006), sold for scrap in 2008 but remains in mothballs</td> </tr> <tr> <td>Cunard Ambassador</td> <td>Cunard Line</td> <td>1972</td> <td>14,160</td> <td>Burnt 1974, rebuilt into a livestock carrier, renamed Linda Clausen, later Procyon, Raslan. Scrapped 1984 after a second fire.</td> </tr> <tr> <td>Aegean Beauty</td> <td>Voyages to Antiquity</td> <td>1973</td> <td>11,563</td> <td>Formerly Aegean Dolphin and Aegean I. Operating</td> </tr> <tr> <td>Serenade of the Seas</td> <td>Royal Caribbean International</td> <td>2003</td> <td>90,090</td> <td>Operating</td> </tr> <tr> <td>Queen Elizabeth 2</td> <td>Cunard Line</td> <td>1969</td> <td>70,327</td> <td>Left fleet in November 2008</td> </tr> <tr> <td>National Geographic Endeavour</td> <td>Lindblad Expeditions</td> <td>1996</td> <td></td> <td>Operating, also known as Endeavour</td> </tr> <tr class="lastRow"> <td>Liberty of the Seas</td> <td>Royal Caribbean International</td> <td>2007</td> <td>154,407</td> <td>Operating</td> </tr> </table> </div><!-- tBodyContainer --> </div><!-- scrollTableContainer --> </body> </html>
将此表用于DIV
<div class="tbl_container"> <table> .... </table> </div> .tbl_container{ overflow:auto; width: 500px;height: 200px; }
除此之外 ，如果你想使它更美观和有吸引力的使用jscollpane来定制你的滚动条..
HTML：
<h1>↓ SCROLL ↓</h1> <table class="blue"> <thead> <tr> <th>Colonne 1</th> <th>Colonne 2</th> <th>Colonne 3</th> </tr> </thead> <tbody> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> </tbody> </table> <h1 class="scrollMore">↓ SCROLL MORE ↓</h1> <table class="purple"> <thead> <tr> <th>Colonne 1</th> <th>Colonne 2</th> <th>Colonne 3</th> </tr> </thead> <tbody> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> <tr> <td>Non</td> <td>Mais</td> <td>Allo !</td> </tr> </tbody> </table> <h1 class="up scrollMore">↑ UP ↑</h1>
CSS：
body{ font:1.2em normal Arial,sans-serif; color:#34495E; } h1{ text-align:center; text-transform:uppercase; letter-spacing:-2px; font-size:2.5em; margin:20px 0; } .container{ width:90%; margin:auto; } table{ border-collapse:collapse; width:100%; } .blue{ border:2px solid #1ABC9C; } .blue thead{ background:#1ABC9C; } .purple{ border:2px solid #9B59B6; } .purple thead{ background:#9B59B6; } thead{ color:white; } th,td{ text-align:center; padding:5px 0; } tbody tr:nth-child(even){ background:#ECF0F1; } tbody tr:hover{ background:#BDC3C7; color:#FFFFFF; } .fixed{ top:0; position:fixed; width:auto; display:none; border:none; } .scrollMore{ margin-top:600px; } .up{ cursor:pointer; }
JS（jQuery）：
;(function($) { $.fn.fixMe = function() { return this.each(function() { var $this = $(this), $t_fixed; function init() { $this.wrap('<div class="container" />'); $t_fixed = $this.clone(); $t_fixed.find("tbody").remove().end().addClass("fixed").insertBefore($this); resizeFixed(); } function resizeFixed() { $t_fixed.find("th").each(function(index) { $(this).css("width",$this.find("th").eq(index).outerWidth()+"px"); }); } function scrollFixed() { var offset = $(this).scrollTop(), tableOffsetTop = $this.offset().top, tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height(); if(offset < tableOffsetTop || offset > tableOffsetBottom) $t_fixed.hide(); else if(offset >= tableOffsetTop && offset <= tableOffsetBottom && $t_fixed.is(":hidden")) $t_fixed.show(); } $(window).resize(resizeFixed); $(window).scroll(scrollFixed); init(); }); }; })(jQuery); $(document).ready(function(){ $("table").fixMe(); $(".up").click(function() { $('html, body').animate({ scrollTop: 0 }, 2000); }); });
对于初学者程序员：如果你不想自己下载和托pipejQuery，你可以从CDN（内容交付networking）中包含它。
<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> </head>
添加jQuery到您的网页点击这里 。
参考： 这里
您可以使用值滚动使用具有溢出属性的划分类。 或者你可以将表格放在一个iframe中。 iframe适用于新旧IE浏览器，但可能不适用于其他浏览器，也可能不适用于最新的IE浏览器。
#myid { overflow-x: scroll; overflow-y: hide; width:200px; /* Or whatever the amount of pixels */ } .myid { overflow-x: scroll; overflow-y: hide; width:200px; /* Or whatever the amount of pixels */ } <div class="myid"> <div class="row">Content1</div> <div class="row2">Content2</div> </div> <table id="myid"><tr><td>Content</td></tr></table>
@jogesh_pi答案是一个很好的解决scheme，我在这里创build了一个例子http://jsfiddle.net/pqgaS/5/ ，检查它，希望这个帮助
<div id="listtableWrapperScroll"> <table id="listtable"> <tr> <td>Data Data</td> <td>Data Data</td> <td>Data Data</td> </tr> </table> </div> #listtableWrapperScroll{ height:100px; width:460px; overflow-y:scroll; border:1px solid #777777; background:#FFFFF2; } #listtableWrapperScroll #listtable{ width:440px; } #listtableWrapperScroll #listtable tr td{ border-bottom:1px dashed #444; }
你可以试试这个
CSS：
#table-wrapper { height:150px; overflow:auto; margin-top:20px; } #table-wrapper table { width:100%; color:#000; } #table-wrapper table thead th .text { position:fixed; top:0px; height:20px; width:35%; border:1px solid red; }
HTML：
<div id="table-wrapper"> <table> <thead> <tr> <th><span class="text">album</span></th> <th><span class="text">song</span></th> <th><span class="text">genre</span></th> </tr> </thead> <tbody> <tr> <td> album 0</td> <td> song0</td> <td> genre0</td> </tr> <tr> <td>album 1</td> <td>song 1</td> <td> genre1</td> </tr> <tr> <td> album2</td> <td>song 2</td> <td> genre2</td> </tr> <tr> <td> album3</td> <td>song 3</td> <td> genre3</td> </tr> <tr> <td> album4</td> <td>song 4</td> <td>genre 4</td> </tr> <tr> <td> album5</td> <td>song 5</td> <td>genre 5</td> </tr> <tr> <td>album 6</td> <td> song6</td> <td> genre6</td> </tr> <tr> <td>album 7</td> <td> song7</td> <td> genre7</td> </tr> <tr> <td> album8</td> <td> song8</td> <td>genre 8</td> </tr> <tr> <td> album9</td> <td> song9</td> <td> genre9</td> </tr> <tr> <td> album10</td> <td>song 10</td> <td> genre10</td> </tr> <tr> <td> album11</td> <td>song 11</td> <td> genre11</td> </tr> <tr> <td> album12</td> <td> song12</td> <td> genre12</td> </tr> <tr> <td>album 13</td> <td> song13</td> <td> genre13</td> </tr> <tr> <td> album14</td> <td> song14</td> <td> genre14</td> </tr> <tr> <td> album15</td> <td> song15</td> <td> genre15</td> </tr> <tr> <td>album 16</td> <td> song16</td> <td> genre16</td> </tr> <tr> <td>album 17</td> <td> song17</td> <td> genre17</td> </tr> <tr> <td> album18</td> <td> song18</td> <td> genre18</td> </tr> <tr> <td> album19</td> <td> song19</td> <td> genre19</td> </tr> <tr> <td> album20</td> <td> song20</td> <td> genre20</td> </tr> </tbody> </table> </div>
检查这个小提琴： http : //jsfiddle.net/Kritika/GLKxB/1/
这将保持table头fixed ，并只scroll table content 。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Scrollable Table</title> <style type="text/css"> * { padding: 0; margin: 0; } table.my_table { font-family: verdana, arial, helvetica, sans-serif; font-size: 11px; cellspacing: 0; border-collapse: collapse; width: 283px; } table.my_table th, table.my_table td { border-bottom: 1px solid #999; border-right: 1px solid #999; } table.my_table th { background: #ffb; } table.my_table td { background: #ffe; } div.scrollableContainer { height: 100px; overflow: auto; width: 300px; margin: 40px; border: 1px solid #999; background: #ffb; } </style> </head> <body> <div class="scrollableContainer"> <table class="my_table scrollable"> <thead> <tr> <th>URL</th> </tr> </thead> <tbody> <tr> <td>http://www.youtube.com/embed/evuSpI2Genw</td> </tr> <tr> <td>http://www.youtube.com/embed/evuSpI2Genw</td> </tr> <tr> <td>http://www.youtube.com/embed/evuSpI2Genw</td> </tr> <tr> <td>http://www.youtube.com/embed/evuSpI2Genw</td> </tr> <tr> <td>http://www.youtube.com/embed/evuSpI2Genw</td> </tr> <tr> <td>http://www.youtube.com/embed/evuSpI2Genw</td> </tr> <tr> <td>http://www.youtube.com/embed/evuSpI2Genw</td> </tr> <tr> <td>http://www.youtube.com/embed/evuSpI2Genw</td> </tr> </tbody> </table> </div> </body> </html>
我最简单的解决scheme是基于固定的列布局 。 你将不得不设置每列的宽度，例如：4列100px每个等于400px总宽度。
table { table-layout: fixed; width: 400px; } td, th { width: 100px; }
固定表格布局algorithm比自动表格布局algorithm有很多优点（例如：水平布局只取决于表格的宽度和宽度而不是单元格的内容;允许浏览器更快地布局表格比自动表格布局;浏览器可以在收到第一行之后开始显示表格;等等）
然后，你必须通过强制显示样式来block而不是默认table-*
thead tr { display: block; } tbody { display: block; height: 256px; overflow-y: auto; }
那将是什么使得tbody作为一个独立的盒子和无关的东西来滚动。 这就是为什么你必须像上面那样修正列宽的主要原因。
工作JsFiddle： https ：//jsfiddle.net/angiolep/65q1gdcy/1/
这是一个有挑战性的问题。 我想我终于有了一个满足完整需求的解决scheme：一个垂直和水平的可滚动dynamic表（dynamic，因为你可以改变行和列的数量，没有单元格固定的宽度或高度）。
HTML和CSS布局非常简单，正如其他人所提到的。 关键问题是重新计算（JavaScript）单元格宽度。 为了确保水平滚动工作，我还重新计算了head和tbody的宽度。
这是一个小提琴https://jsfiddle.net/jmarcos00/6hv0dsj8/1/
HTML代码：
<!-- thead and tbody have identifiers table is inside a div container --> <div> <table> <thead id="mythead"> <tr> <th>header one</th> <th>two</th> <th>header three</th> <th>header one</th> <th>two</th> <th>header three</th> </tr> </thead> <tbody id="mytbody"> <tr> <td>one</td> <td>data two</td> <td>three</td> <td>one</td> <td>data two</td> <td>three</td> </tr> <tr> <td>one</td> <td>data two</td> <td>three</td> <td>one</td> <td>data two</td> <td>three</td> </tr> <tr> <td>one</td> <td>data two</td> <td>three</td> <td>one</td> <td>data two</td> <td>three</td> </tr> <tr> <td>one</td> <td>data two</td> <td>three</td> <td>one</td> <td>data two</td> <td>three</td> </tr> <tr> <td>one</td> <td>data two</td> <td>three</td> <td>one</td> <td>data two</td> <td>three</td> </tr> <tr> <td>one</td> <td>data two</td> <td>three</td> <td>one</td> <td>data two</td> <td>three</td> </tr> <tr> <td>one</td> <td>data two</td> <td>three</td> <td>one</td> <td>data two</td> <td>three</td> </tr> <tr> <td>one</td> <td>data two</td> <td>three</td> <td>one</td> <td>data two</td> <td>three</td> </tr> <tr> <td>one</td> <td>data two</td> <td>three</td> <td>one</td> <td>data two</td> <td>three</td> </tr> <tr> <td>one</td> <td>data two</td> <td>three</td> <td>one</td> <td>data two</td> <td>three</td> </tr> </tbody> </table> </div>
CSS代码：
/* table border rule */ table, td, th { border: 1px solid black; } /* display as block plus display vertical scroll bars */ thead, tbody { display: block; overflow-y: scroll; } /* sample height */ tbody { height: 100px; } /* sample width and horizontal scroll bar */ div { width: 200px; overflow-x: auto; }
JavaScript代码：
var i, w, wtot, thtot, thw, tdw, theadtr, tbodytr; var th_rect, td_rect, theadtr_rect, tbodytr_rect; var safe = new Array(); // get thead and tbody var mythead = document.getElementById("mythead"); var mytbody = document.getElementById("mytbody"); // get first tr of thead and tbody theadtr = mythead.children[0]; tbodytr = mytbody.children[0]; theadtr_rect = theadtr.getBoundingClientRect(); tbodytr_rect = tbodytr.getBoundingClientRect(); // get width difference of longer first tr // difference between tr and parent if (tbodytr_rect.width > theadtr_rect.width) wtot = mytbody.getBoundingClientRect().width - tbodytr_rect.width; else wtot = mythead.getBoundingClientRect().width - theadtr_rect.width; // get width difference between tr and total th width (first step) thtot = theadtr_rect.width; // get th thead array and td tbody array theadtr = theadtr.children; tbodytr = tbodytr.children; // get loop for (i = 0; i < theadtr.length; i++) { // second step for width difference between tr and total th width th_rect = theadtr[i].getBoundingClientRect(); td_rect = tbodytr[i].getBoundingClientRect(); thtot -= th_rect.width; // get width of each th and first row td (without paddings etc) tdw = parseFloat(window.getComputedStyle(tbodytr[i]).getPropertyValue("width")); thw = parseFloat(window.getComputedStyle(theadtr[i]).getPropertyValue("width")); // get bigger width w = (tdw > thw) ? tdw : thw; safe.push(w); // add to width total (decimal value with paddings etc) w = (tdw > thw) ? td_rect.width : th_rect.width; wtot += w; } // consider tr width and total th width difference wtot += thtot; // set loop for (i = 0; i < theadtr.length; i++) { // set width to th and first row td w = safe[i] + "px"; theadtr[i].style.width = w; tbodytr[i].style.width = w; } // set width for thead and tbody wtot = wtot + "px"; mythead.style.width = wtot; mytbody.style.width = wtot;
