<table> <tbody>可滚动？
我想在右边有一个滚动条的表格。
我想完成这个没有任何插件（jQuery）只是用CSS。
表头应该保持不变。
我需要做些什么才能做到这一点？
你承担了一项任务，如果你成功了，会使你成为英雄。 我试过这个和直接的东西 – 定位：固定; <thead> – 是不可能的。 我不得不将所有的<thead>复制到一个新的对象中。 但是当你这样做时，<th>元素的水平间距都会消失，所以标题不再与<td>alignment。 我最终做了这样的事情：
首先放弃ie6和ie7。 这些人没有希望
-
制作两张表格，一张是不可见的，另外一张是<thead>，另一张是反过来。
-
给z-index：1; 到可见的<thead>表中。
-
给z-index：0; 到可见的<tbody>的表格。
-
处理水平滚动，但直到你发现onScroll不是ie8事件（更不用说ie6），所以你必须每隔十分之一秒进行一次setInterval处理，以处理滚动<thead>在ie8中左右。
这将给你一个两轴无限滚动的表体，一个只能在x轴上滚动的表头。 在FF，Chrome和Safari中有相当多的作品。 但ie8抖动。 真正的皮塔饼
祝你好运，如果你得到这个工作，请写信！
只有Firefox和IE6-7浏览器支持内置的<tbody>滚动：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Scrolling</title> <style type="text/css"> div.content { border: #000000 1px solid; height: 400px; overflow-y: auto; width: 800px; } .fixedHeader { white-space: nowrap; } .fixedHeader tr { height: auto; position: relative; } .fixedHeader tr td { background-color: #778899; border: #000000 1px solid; text-align: center; } tbody.scrollContent { overflow-x: hidden; overflow-y: auto; height: 370px; } .scrollContent tr td { background-color: #C0C0C0; border: #000000 1px solid; padding-right: 22px; vertical-align: top; } </style> <!--[if IE]> <style type=text/css> div.content { overflow-x: hidden; overflow-y: auto; } </style> <![endif]--> </head> <body> <div> <div class="content"> <table cellspacing="0"> <thead class="fixedHeader"> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </thead> <tbody class="scrollContent"> <tr> <td>Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented.</td> <td>Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. </td> <td>Pages can be displayed either with or without tabs. </td> <td>Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented.</td> </tr> </tbody> </table> </div> </div> </body> </html>
这是解决scheme，
表格固定的标题和表格内的内容可以滚动。
HTML部分
<div class="table_wrapper"> <div class="header"> <div class="head1">Left</div> <div class="head2">Center</div> <div class="head3">Right Column</div> </div> <div class="tbody"> <table> <tbody><tr><td class="td1">1</td><td class="td2">2</td><td class="td3">3</td></tr> <tr><td class="td1">1</td><td>2</td><td class="td3">3</td></tr> <tr><td class="td1">2</td><td>second</td><td class="td3">third</td></tr> <tr><td class="td1">3</td><td>second</td><td class="td3">third</td></tr> <tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr> <tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr> <tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr> <tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr> <tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr> <tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr> <tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr> </tbody></table> </div> </div>
CSS部分
.table_wrapper {background:tomato;border:1px double olive;float:left;} .tbody{height:80px;overflow-y:auto;width:400px;background:yellow;} table{border-collapse:collapse; width:100%;} td{border-right:1px solid red;border-bottom:1px solid red;padding:1px 5px;} .td3{border-right-width:0;} .header{ width:400px;background:DodgerBlue;border-bottom:1px solid red;} .header div{padding:1px 5px;float:left;border-right:1px solid orange;} .header .head3{float:none;border-right-width:0;} .head3 span{padding-left:5px;} .td1{width:100px;} .td2{width:140px;} .header .head1{width:100px;} .header .head2{width:140px;}
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style> table { width: 320px; display: block; border:solid black 1px; } thead { display: inline-block; width: 100%; height: 20px; } tbody { height: 200px; display: inline-block; width: 100%; overflow: auto; } th, td { width: 100px; text-align:center; } </style> </head> <body> <table> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> </tbody> </table> </body> </html>
这个简单的CSS应该做的伎俩：
table.table-scroll-body { position: relative; height: 200px; } table.table-scroll-body tbody { position: absolute; width: 100%; max-height: 150px; overflow: auto; }
而HTML，如果你需要它..
<table class="table-scroll-body"> <thead> <th>Header 1</th> <th>Header 2</th> </thead> <tbody> <tr> <td>Some content..</td> <td>Some content..</td> </tr> <tr> <td>Some content..</td> <td>Some content..</td> </tr> <tr> <td>Some content..</td> <td>Some content..</td> </tr> </tbody>
从astrandr的答案分支出来..这是我是如何做到的，用他们的例子：
CSS：
.transactHistory table { width: 320px; display: block; } .transactHistory thead { display: inline-block; } .transactHistory tbody { height: 133px; display: inline-block; width: 100%; overflow: auto; } .transactHistory th { width: 100px; text-align:center; } .transactHistory tr { width: 100px; text-align:center; } .transactHistory td { width: 100px; text-align:center; }
表：
<div class="transactHistory"> (..table code) </div>
这工作，把它从我的网站：
#news_box { overflow: scroll; overflow-x: hidden; }
编辑：我也只是发现了一个很好的例子：
http://www.imaputz.com/cssStuff/bigFourVersion.html
这里有另一篇好文章：
http://www.scientificpsychic.com/blogentries/html-and-css-scrolling-table-with-fixed-heading.html
