双向固定表格示例.
<html>
<head>
<title>双向固定表格示例</title>
<style>
<!--
body { margin:0;overflow:hidden;}
table {
border-collapse : collapse;/*****此处必须设置成collpse否则不能实现双向滚****/
table-layout : fixed;
border-left :0px solid #000000;
border-right :0px solid #000000;
border-top :0px solid #000000;
border-bottom :0px solid #000000;
}
th {
background-color: #C8D8E5;
color : #000000;
width : 100px;
text-align : center;
}
td {
background-color: #E4EBF2;
border-right : 1px solid #000000;
border-bottom : 1px solid #000000;
color : #000000;
width : 100px;
text-align : center;
}
th.locked_left_top{
background-color: #C8D8E5;
font-weight : bold;
left : expression(document.getElementById('table_container').scrollLeft);
top : expression(document.getElementById('table_container').scrollTop);
border-right : 1px solid #000000;
border-bottom : 1px solid #000000;
position : relative;
z-index : 2
}
td.locked_left {
background-color: #C8D8E5;
font-weight : bold;
border-right : 1px solid #000000;
border-bottom : 0px solid #000000;
border-top : 1px solid #000000;
left : expression(document.getElementById('table_container').scrollLeft);
position : relative;
z-index : 1
}
th.locked_top {
background-color: #C8D8E5;
font-weight : bold;
border-right : 1px solid #000000;
border-bottom : 1px solid #000000;
top : expression(document.getElementById('table_container').scrollTop);
position : relative;
z-index : 1
}
#table_container {
width : 100%;
height : 100%;
overflow : auto;
border :0px;
}
td {WORD-WRAP: break-word; }
-->
</style>
</head>
<body >
<div id='table_container'>
<table width="100%" border="0" cellpadding="0">
<thead>
<tr>
<th class='locked_left_top'>Number</th>
<th class='locked_top' >English</th>
<th class='locked_top' >French </th>
<th class='locked_top' >German </th>
<th class='locked_top' >German </th>
<th class='locked_top' >German </th>
<th class='locked_top' >German </th>
<th class='locked_top' >German </th>
<th class='locked_top' >German </th>
<th class='locked_top' >German </th>
</tr>
</thead>
<tbody>
<tr>
<td class='locked_left'>1</td>
<td >one</td>
<td >un</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
</tr>
<tr>
<td class='locked_left'>1</td>
<td >one</td>
<td >un</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
</tr>
<tr>
<td class='locked_left'>1</td>
<td >one</td>
<td >un</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
</tr>
<tr>
<td class='locked_left'>1</td>
<td >one</td>
<td >un</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
</tr>
<tr>
<td class='locked_left'>1</td>
<td >one</td>
<td >un</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
</tr>
<tr>
<td class='locked_left'>1</td>
<td >one</td>
<td >un</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
</tr>
<tr>
<td class='locked_left'>1</td>
<td >one</td>
<td >un</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
</tr>
<tr>
<td class='locked_left'>1</td>
<td >one</td>
<td >un</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
</tr>
<tr>
<td class='locked_left'>1</td>
<td >one</td>
<td >un</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
</tr>
<tr>
<td class='locked_left'>1</td>
<td >one</td>
<td >un</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
</tr>
<tr>
<td class='locked_left'>1</td>
<td >one</td>
<td >un</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
</tr>
<tr>
<td class='locked_left'>1</td>
<td >one</td>
<td >un</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
</tr>
<tr>
<td class='locked_left'>1</td>
<td >one</td>
<td >un</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
<td >eins</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
