欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

css实现表头固定的可滚动表格的浏览器兼容有关问题

更新时间: 2014-01-05 00:52:31 责任编辑: Author_N1

 

CSS实现表头固定的可滚动表格的浏览器兼容问题
我想作一个表头固定、表身可滚动的表格。从网上搜来一个例子如下:

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>
上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 00:52:31
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/855/
本文WWW.DOC100.NET DOC100.NET版权所有。