CSS实现表头固定的可滚动表格的浏览器兼容问题_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 12:25:471878浏览
我想作一个表头固定、表身可滚动的表格。从网上搜来一个例子如下：
http://www.imaputz.com/cssStuff/bigFourVersion.html
http://stackoverflow.com/questions/13043837/scrollable-table-with-fixed-header
经过调整，在Firefox、Chrome和IE10下好用，但在IE8、IE9和IE11里不好用。症状是tboytboy部分不能滚动（没有滚动条）。表格外边的container可以有滚动条，但表头会和表身一起滚动。
请问有没有好办法解决这浏览器一兼容问题？谢谢！
（从明天起休假一周，回来后结账）
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style>*{ margin:0; padding:0; }div.tableContainer { clear: both; border: 0px solid #963; height: 420px; /* html>body tbody.scrollContent height plus 23px for the header */ overflow: auto; width: 756px /* Remember to leave 16px for the scrollbar! */}/* define width of table. IE browsers only */div.tableContainer table { float: left; width: 740px; border-collapse:collapse; border: 1px solid #76a0ae; background-color: #ddd2e5;}div.tableContainer table tr{ height:33px;}/*html>body */tbody.scrollContent { margin-top:10px; display: block; height: 352px; overflow: auto; width: 100%; background-color: #eeeeee;}tbody td { height: 32px;}/*html>body */thead.fixedHeader tr { display: block; background-color: #ddd2e5;}/*html>body */thead.fixedHeader th { /* TH 1 */ border: 1px solid #76a0ae; width: 180px; height:40px;}/*html>body */thead.fixedHeader th + th { /* TH 2 */ width: 240px;}/*html>body */thead.fixedHeader th + th + th { /* TH 3 +16px for scrollbar */ width: 336px;}/*html>body */tbody.scrollContent td { /* TD 1 */ border: 1px solid #76a0ae; width: 180px; height:33px;}/*html>body */tbody.scrollContent td + td { /* TD 2 */ width: 240px;}/*html>body */tbody.scrollContent td + td + td { /* TD 3 +16px for scrollbar */ width: 320px;}</style></head><body><h1>Pure CSS Scrollable Table with Fixed Header</h1><p>Using CSS to allow scrolling within a single HTML table</p><br /><br /><div id="tableContainer" class="tableContainer"><table width="100%" cellspacing="0" cellpadding="0" border="0" class="scrollTable"> <thead class="fixedHeader"> <tr class="alternateRow"> <th><a href="#">Header 1</a></th> <th><a href="#">Header 2</a></th> <th><a href="#">Header 3</a></th> </tr> </thead> <tbody class="scrollContent"> <tr> <td>Cell Content 1 1</td> <td>Cell Content 1 2</td> <td>Cell Content 1 3</td> </tr> <tr> <td>Cell Content 2 1</td> <td>Cell Content 2 2</td> <td>Cell Content 2 3</td> </tr> <tr> <td>Cell Content 3 1</td> <td>Cell Content 3 2</td> <td>Cell Content 3 3</td> </tr> <tr> <td>Cell Content 4 1</td> <td>Cell Content 4 2</td> <td>Cell Content 4 3</td> </tr> <tr> <td>Cell Content 5 1</td> <td>Cell Content 5 2</td> <td>Cell Content 5 3</td> </tr> <tr> <td>Cell Content 6 1</td> <td>Cell Content 6 2</td> <td>Cell Content 6 3</td> </tr> <tr> <td>Cell Content 7 1</td> <td>Cell Content 7 2</td> <td>Cell Content 7 3</td> </tr> <tr> <td>Cell Content 8 1</td> <td>Cell Content 8 2</td> <td>Cell Content 8 3</td> </tr> <tr> <td>Cell Content 9 1</td> <td>Cell Content 9 2</td> <td>Cell Content 9 3</td> </tr> <tr> <td>Cell Content 10 1</td> <td>Cell Content 10 2</td> <td>Cell Content 10 3</td> </tr> <tr> <td>Cell Content 11 1</td> <td>Cell Content 11 2</td> <td>Cell Content 11 3</td> </tr> <tr> <td>Cell Content 12 1</td> <td>Cell Content 12 2</td> <td>Cell Content 12 3</td> </tr> <tr> <td>Cell Content 13 1</td> <td>Cell Content 13 2</td> <td>Cell Content 13 3</td> </tr> <tr> <td>Cell Content 14 1</td> <td>Cell Content 14 2</td> <td>Cell Content 14 3</td> </tr> <tr> <td>Cell Content 15 1</td> <td>Cell Content 15 2</td> <td>Cell Content 15 3</td> </tr> </tbody></table></div></body></html> 回复讨论(解决方案)
没人回复。是问题太难了，还是我的人品太差？
完全复制表
一张在下面滚动
一张外面包个div 只显示表头 叠在上面
多谢KK3K2005热心回复！
用两个同样的表？能说得再详细一点吗？我用在ASP.NET网页中。
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn