Heim > Artikel > Web-Frontend > CSS实现表头固定的可滚动表格的浏览器兼容问题_html/css_WEB-ITnose
CSS实现表头固定的可滚动表格的浏览器兼容问题_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:25:471835Durchsuche
我想作一个表头固定、表身可滚动的表格。从网上搜来一个例子如下：
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网页中。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：怎么让一个iframe框架居中显示，左右留白啊？_html/css_WEB-ITnoseNächster Artikel：图片上的这种效果怎么实现？_html/css_WEB-ITnose