固定table表头

 

<html>
<head>
<style type="text/css" mce_bogus="1">

div.tableContainer {
 clear: both;
 border: 1px solid #963;
 height: expression(document.body.clientHeight*0.3);
 overflow: auto;
 width: 100%;
}

div.tableContainer table {
 float: left;
 width: 100%
}

thead.fixedHeader tr {
 position: relative;

 top: expression(document.getElementById("tableContainer").scrollTop)
}

thead.fixedHeader th {
 background: #C96;
 border-left: 1px solid #EB8;
 border-right: 1px solid #B74;
 border-top: 1px solid #EB8;
 font-weight: normal;
 padding: 4px 3px;
 text-align: center
}

tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
 background: #FFF;
 border-bottom: 1px solid #EEE;
 border-left: 1px solid #EEE;
 border-right: 1px solid #AAA;
 border-top: 1px solid #AAA;
 padding: 2px 3px
}

</style>
</head>
<body>
<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<thead class="fixedHeader">
 <tr>
  <th>表头 1</th>
  <th>表头 2</th>
  <th>表头 3</th>
  <th>表头 4</th>
  <th>表头 5</th>
  <th>表头 6</th>
  <th>表头 7</th>
 </tr>
</thead>
<tbody class="scrollContent">
 <tr>
  <td>Cell Content 1</td>
  <td>Cell Content 2</td>
  <td>Cell Content 3</td>
  <td>Cell Content 4</td>
  <td>Cell Content 5</td>
  <td>Cell Content 6</td>
  <td>Cell Content 7</td>
 </tr>
 <tr>
  <td>More Cell Content 1</td>
  <td>More Cell Content 2</td>
  <td>More Cell Content 3</td>
  <td>More Cell Content 4</td>
  <td>More Cell Content 5</td>
  <td>More Cell Content 6</td>
  <td>More Cell Content 7</td>
 </tr>
 <tr>
  <td>Even More Cell Content 1</td>
  <td>Even More Cell Content 2</td>
  <td>Even More Cell Content 3</td>
  <td>Even More Cell Content 4</td>
  <td>Even More Cell Content 5</td>
  <td>Even More Cell Content 6</td>
  <td>Even More Cell Content 7</td>
 </tr>
 <tr>
  <td>And Repeat 1</td>
  <td>And Repeat 2</td>
  <td>And Repeat 3</td>
  <td>And Repeat 4</td>
  <td>And Repeat 5</td>
  <td>And Repeat 6</td>
  <td>And Repeat 7</td>
 </tr>
 <tr>
  <td>Even More Cell Content 1</td>
  <td>Even More Cell Content 2</td>
  <td>ven More Cell Content 3</td>
  <td>Even More Cell Content 4</td>
  <td>Even More Cell Content 5</td>
  <td>Even More Cell Content 6</td>
  <td>Even More Cell Content 7</td>
 </tr>
 <tr>
  <td>And Repeat 1</td>
  <td>And Repeat 2</td>
  <td>And Repeat 3</td>
  <td>And Repeat 4</td>
  <td>And Repeat 5</td>
  <td>And Repeat 6</td>
  <td>And Repeat 7</td>
 </tr>
 <tr>
  <td nowrap>Even More Cell Content 1</td>
  <td nowrap>Even More Cell Content 2</td>
  <td nowrap>Even More Cell Content 3</td>
  <td nowrap>Even More Cell Content 4</td>
  <td nowrap>Even More Cell Content 5</td>
  <td nowrap>Even More Cell Content 6</td>
  <td nowrap>Even More Cell Content 7</td>
 </tr>
 <tr>
  <td>And Repeat 1</td>
  <td>And Repeat 2</td>
  <td>And Repeat 3</td>
  <td>And Repeat 4</td>
  <td>And Repeat 5</td>
  <td>And Repeat 6</td>
  <td>And Repeat 7</td>
 </tr>
</tbody>
</table>
</div>
</body>

</html>

 

 

 

你可能感兴趣的:(table)