Freezed header & footer table

最新推荐文章于 2024-04-19 12:43:54 发布
stefli
最新推荐文章于 2024-04-19 12:43:54 发布
阅读量806
点赞数
分类专栏： Javascript 文章标签： header table class
本文链接：https://blog.csdn.net/stefli/article/details/3485121
版权
Javascript 专栏收录该内容
32 篇文章 0 订阅
订阅专栏
There is a freezed header table from internet. but now i modify it to add a freezed footer in the table.
 
 <html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>固定表头和列</title>
<style type="text/css"> 
#dataTable { 
    font-size: 11px;
    background: #005963;
    padding: 0;
    margin: 0;
}
.fixedTitleRow {
    
    position: relative; 
    top: expression(this.offsetParent.scrollTop); 
    z-index: 10;
}
.fixedTitleRow td {
    border-top: 1px solid #005963;
    font-weight: bold;
    color: black;
    text-align: center;
    height: 30px;
    background: #bdcfce;
}
.fixedBottomTitleRow td {
    border-bottom: 1px solid #005963;
    font-weight: bold;
    color: black;
    text-align: center;
    height: 30px;
    background: #bdcfce;
}
.fixedBottomTitleRow {
    position: absolute; 
    top: expression(this.offsetParent.scrollTop +((scrollDiv.offsetWidth>=scrollDiv.scrollWidth+17)?((scrollDiv.offsetWidth>874)?170:156):153)); 
    z-index: 10;
}
        
.fixedTitleColumn {
    width: 50px;
    border-left: 1px solid #005963;
    position: relative; 
    left: expression(this.parentElement.offsetParent.scrollLeft);
}
        
.fixedDataColumn {
    border-left: 1px solid #005963;
    color: black;
    text-align: center;
    background: #bdcfce;
    height: 29px;
    position: relative;
    left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
}
.odd {
    background: #ffffff;
}
.even {
    background: #dfe7e7;
}
</style>
</head>
<body>
<div id="debug">Debug infor......</div>
<div id="scrollDiv" style="width: 100%; overflow: auto; cursor: default; position: absolute; height: 200px;">
    <table id='dataTable' width='100%' cellpadding='2' cellspacing='0'>
    <tr class="fixedTitleRow">
        <td class="fixedTitleColumn" nowrap="nowrap">EU Id</td>
        <td nowrap="nowrap">Bus Name</td>
        <td nowrap="nowrap">Tradestyle1</td>
        <td nowrap="nowrap">Tradestyle2</td>
        <td nowrap="nowrap">EU Loc Id</td>
        <td nowrap="nowrap">EU Loc Name</td>
        <td nowrap="nowrap">Address</td>
        <td nowrap="nowrap">City</td>
        <td nowrap="nowrap">State</td>
        <td nowrap="nowrap">Zip</td>
        <td nowrap="nowrap">Employees</td>
        <td nowrap="nowrap">Revenue</td>
        <td nowrap="nowrap">Duns No.</td>
        <td nowrap="nowrap">SIC Code</td>
        <td nowrap="nowrap">Choose</td>
    </tr>
    <tbody id="content">
    <tr class="odd">
        <td class="fixedDataColumn">88</td>
        <td>88</td>
        <td>88</td>
        <td>88</td>
        <td>88</td>
        <td>22</td>
        <td>22</td>
        <td>22</td>
        <td>22</td>
        <td>22</td>
        <td>22</td>
        <td>22</td>
        <td>22</td>
        <td>22</td>
        <td>22sssss<br/>sssssss<br/>sssssssssss<br/>sssssssssssssssssss<br/>sssssssssssssssssssssssssssssssssssssssssssss</td>
    </tr>
    <tr class="even">
        <td class="fixedDataColumn">88</td>
        <td>88</td>
        <td>88</td>
        <td>88</td>
        <td>88</td>
        <td>22</td>
        <td>22</td>
        <td>22</td>
        <td>22</td>
        <td>22</td>
        <td>22</td>
        <td>22</td>
        <td>22</td>
        <td>22</td>
        <td>22</td>
    </tr>
    <tr class="odd">
        <td class="fixedDataColumn">88</td>
        <td>88</td>
        <td>88</td>
        <td>88</td>
        <td>88</td>
        <td>22</td>
        <td>22</td>
        <td>22</td>
        <td>22</td>
        <td>22</td>
        <td>22</td>
        <td>22</td>
        <td>22</td>
        <td>22</td>
        <td>22</td>
    </tr>
    <tr class="even">
        <td class="fixedDataColumn">111</td>
        <td>111</td>
        <td>1111</td>
        <td>This is Test</td>
        <td>1</td>
        <td>001</td>
        <td>002</td>
        <td>003</td>
        <td>004</td>
        <td>005</td>
        <td>006</td>
        <td>007</td>
        <td>008</td>
        <td>009</td>
        <td>010</td>
    </tr>
    <tr class="odd">
        <td class="fixedDataColumn">111</td>
        <td>111</td>
        <td>1111</td>
        <td>This is Test</td>
        <td>1</td>
        <td>001</td>
        <td>002</td>
        <td>003</td>
        <td>004</td>
        <td>005</td>
        <td>006</td>
        <td>007</td>
        <td>008</td>
        <td>009</td>
        <td>010</td>
    </tr>
    <tr class="even">
        <td class="fixedDataColumn">111</td>
        <td>111</td>
        <td>1111</td>
        <td>This is Test</td>
        <td>1</td>
        <td>001</td>
        <td>002</td>
        <td>003</td>
        <td>004</td>
        <td>005</td>
        <td>006</td>
        <td>007</td>
        <td>008</td>
        <td>009</td>
        <td>22sssss<br/>sssssss<br/>sssssssssss<br/>sssssssssssssssssss<br/>sssssssssssssssssssssssssssssssssssssssssssss</td>
    </tr>
    <tr class="odd">
        <td class="fixedDataColumn">111</td>
        <td>111</td>
        <td>1111</td>
        <td>This is Test</td>
        <td>1</td>
        <td>001</td>
        <td>002</td>
        <td>003</td>
        <td>004</td>
        <td>005</td>
        <td>006</td>
        <td>007</td>
        <td>008</td>
        <td>009</td>
        <td>010</td>
    </tr>
    <tr class="even">
        <td class="fixedDataColumn">111</td>
        <td>111</td>
        <td>1111</td>
        <td>This is Test</td>
        <td>1</td>
        <td>001</td>
        <td>002</td>
        <td>003</td>
        <td>004</td>
        <td>005</td>
        <td>006</td>
        <td>007</td>
        <td>008</td>
        <td>009</td>
        <td>22sssss<br/>sssssss<br/>sssssssssss<br/>sssssssssssssssssss<br/>sssssssssssssssssssssssssssssssssssssssssssss</td>
    </tr>
    <tr class="odd">
        <td class="fixedDataColumn">111</td>
        <td>111</td>
        <td>1111</td>
        <td>This is Test</td>
        <td>1</td>
        <td>001</td>
        <td>002</td>
        <td>003</td>
        <td>004</td>
        <td>005</td>
        <td>006</td>
        <td>007</td>
        <td>008</td>
        <td>009</td>
        <td>010</td>
    </tr>
    <tr class="even">
        <td class="fixedDataColumn">111</td>
        <td>111</td>
        <td>1111</td>
        <td>This is Test</td>
        <td>1</td>
        <td>001</td>
        <td>002</td>
        <td>003</td>
        <td>004</td>
        <td>005</td>
        <td>006</td>
        <td>007</td>
        <td>008</td>
        <td>009</td>
        <td>22sssss<br/>sssssss<br/>sssssssssss<br/>sssssssssssssssssss<br/>sssssssssssssssssssssssssssssssssssssssssssss</td>
    </tr>
    <tr class="odd">
        <td class="fixedDataColumn"> </td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    </tbody>
    <tr id="fixedBottomTitleRow" class="fixedBottomTitleRow">
        <td class="fixedTitleColumn">EU Id</td>
        <td>Bus Name</td>
        <td>Tradestyle1</td>
        <td>Tradestyle2</td>
        <td>EU Loc Id</td>
        <td>EU Loc Name</td>
        <td>Address</td>
        <td>City</td>
        <td>State</td>
        <td>Zip</td>
        <td>Employees</td>
        <td>Revenue</td>
        <td>Duns No.</td>
        <td>SIC Code</td>
        <td>Choose</td>
    </tr>
    </table>
</div>
</body>
</html>
<script>
var s = "scrollDiv.offsetWidth = " + scrollDiv.offsetWidth + " scrollDiv.scrollWidth = " + scrollDiv.scrollWidth;
s = s + "<br/>scrollDiv.offsetHeight = " + scrollDiv.offsetHeight + " scrollDiv.scrollHeight = " + scrollDiv.scrollHeight;
s = s + "<br/>dataTable.offsetWidth = " + dataTable.offsetWidth + " dataTable.offsetHeight = " + dataTable.offsetHeight;
s = s + "<br/>content.offsetWidth = " + content.offsetWidth + " content.offsetHeight = " + content.offsetHeight;
s = s + "<br/>scrollDiv.style.height = " + scrollDiv.style.height + " scrollDiv.style.width = " + scrollDiv.style.width;
s = s + "<br/>dataTable.style.height = " + dataTable.style.height + " dataTable.style.width = " + dataTable.style.width;
s = s + "<br/>scrollDiv.scrollTop = " + scrollDiv.scrollTop + " scrollDiv.scrollLeft = " + scrollDiv.scrollLeft;
//debug.innerHTML = s; 
</script>
 