纯css实现固定表头

精选转载
msi1979 2014-11-05 21:45:00
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>6.20</title>
    
  <style>
/* 基本样式{{ */

body {
  background: #FFF;
  color: #000;
  font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
  margin: 10px;
  padding: 0
}

table, td, a {
  color: #000;
  font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
}

h1 {
  font: normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
  margin: 0 0 5px 0
}

h2 {
  font: normal normal 16px Verdana, Geneva, Arial, Helvetica, sans-serif;
  margin: 0 0 5px 0
}

h3 {
  font: normal normal 13px Verdana, Geneva, Arial, Helvetica, sans-serif;
  color: #008000;
  margin: 0 0 15px 0
}
/* 基本样式}} */

/*定义可滚动区域宽、高样式，其中，增加滚动条的16px*/
div.tableContainer {
  clear: both;
  border: 1px solid #963;
  height: 285px;
  overflow: auto;
  width: 756px
}
/* 定义overflow为hidden */
html>body div.tableContainer {
  overflow: hidden;
  width: 756px
}
/* 定义表格宽度 */
div.tableContainer table {
  float: left;
  width: 740px
}
/* define width of table. Add 16px to width for scrollbar.           */
/* All other non-IE browsers.                                        */
html>body div.tableContainer table {
  width: 756px
}
thead.fixedHeader tr {
  position: relative
}
/*设置thead样式*/
html>body thead.fixedHeader tr {
  display: block
}
/*定义th样式*/
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: left
}
/*定义a元素样式*/
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
  color: #FFF;
  display: block;
  text-decoration: none;
  width: 100%
}
/*a:hover样式*/
thead.fixedHeader a:hover {
  color: #FFF;
  display: block;
  text-decoration: underline;
  width: 100%
}
/*定义表格内容可滚动样式，tbody元素为块级元素*/
html>body tbody.scrollContent {
  display: block;
  height: 262px;
  overflow: auto;
  width: 100%
}
/*td元素样式*/
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
  background: #FFF;
  border-bottom: none;
  border-left: none;
  border-right: 1px solid #CCC;
  border-top: 1px solid #DDD;
  padding: 2px 3px 3px 4px
}

tbody.scrollContent tr.alternateRow td {
  background: #EEE;
  border-bottom: none;
  border-left: none;
  border-right: 1px solid #CCC;
  border-top: 1px solid #DDD;
  padding: 2px 3px 3px 4px
}
/*th样式*/
html>body thead.fixedHeader th {
  width: 200px
}
html>body thead.fixedHeader th + th {
  width: 240px
}
html>body thead.fixedHeader th + th + th {
  width: 316px
}
/*td元素样式*/
html>body tbody.scrollContent td {
  width: 200px
}
html>body tbody.scrollContent td + td {
  width: 240px
}
html>body tbody.scrollContent td + td + td {
  width: 300px
}

  </style>

</head>
<body>
  
<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
<thead class="fixedHeader">
  <tr class="alternateRow">
    <th><a href="#">固定表头 1</a></th>
    <th><a href="#">固定表头 2</a></th>
    <th><a href="#">固定表头 3</a></th>
  </tr>
</thead>
<tbody class="scrollContent">
  <tr class="normalRow">
    <td>固定表头的CSS表格 1</td>
    <td>固定表头的CSS表格 2</td>
    <td>固定表头的CSS表格 3</td>
  </tr>
  <tr class="alternateRow">
    <td>固定表头的CSS表格 1</td>
    <td>固定表头的CSS表格 2</td>
    <td>固定表头的CSS表格 3</td>
  </tr>
  <tr class="normalRow">
    <td>固定表头的CSS表格 1</td>
    <td>固定表头的CSS表格 2</td>
    <td>固定表头的CSS表格 3</td>
  </tr>
  <tr class="alternateRow">
    <td>固定表头的CSS表格 1</td>
    <td>固定表头的CSS表格 2</td>
    <td>固定表头的CSS表格 3</td>
  </tr>
  <tr class="normalRow">
    <td>固定表头的CSS表格 1</td>
    <td>固定表头的CSS表格 2</td>
    <td>固定表头的CSS表格 3</td>
  </tr>
  <tr class="alternateRow">
    <td>固定表头的CSS表格 1</td>
    <td>固定表头的CSS表格 2</td>
    <td>固定表头的CSS表格 3</td>
  </tr>
  <tr class="normalRow">
    <td>固定表头的CSS表格 1</td>
    <td>固定表头的CSS表格 2</td>
    <td>固定表头的CSS表格 3</td>
  </tr>
  <tr class="alternateRow">
    <td>固定表头的CSS表格 1</td>
    <td>固定表头的CSS表格 2</td>
    <td>固定表头的CSS表格 3</td>
  </tr>
  <tr class="normalRow">
    <td>固定表头的CSS表格 1</td>
    <td>固定表头的CSS表格 2</td>
    <td>固定表头的CSS表格 3</td>
  </tr>
  <tr class="alternateRow">
    <td>固定表头的CSS表格 1</td>
    <td>固定表头的CSS表格 2</td>
    <td>固定表头的CSS表格 3</td>
  </tr>
  <tr class="normalRow">
    <td>固定表头的CSS表格 1</td>
    <td>固定表头的CSS表格 2</td>
    <td>固定表头的CSS表格 3</td>
  </tr>
  <tr class="alternateRow">
    <td>固定表头的CSS表格 1</td>
    <td>固定表头的CSS表格 2</td>
    <td>固定表头的CSS表格 3</td>
  </tr>
  <tr class="normalRow">
    <td>固定表头的CSS表格 1</td>
    <td>固定表头的CSS表格 2</td>
    <td>固定表头的CSS表格 3</td>
  </tr>
  <tr class="alternateRow">
    <td>固定表头的CSS表格 1</td>
    <td>固定表头的CSS表格 2</td>
    <td>固定表头的CSS表格 3</td>
  </tr>
  <tr class="normalRow">
    <td>固定表头的CSS表格 1</td>
    <td>固定表头的CSS表格 2</td>
    <td>固定表头的CSS表格 3</td>
  </tr>
  <tr class="alternateRow">
    <td>固定表头的CSS表格 1</td>
    <td>固定表头的CSS表格 2</td>
    <td>固定表头的CSS表格 3</td>
  </tr>
  <tr class="normalRow">
    <td>固定表头的CSS表格 1</td>
    <td>固定表头的CSS表格 2</td>
    <td>固定表头的CSS表格 3</td>
  </tr>
  <tr class="alternateRow">
    <td>固定表头的CSS表格 1</td>
    <td>固定表头的CSS表格 2</td>
    <td>固定表头的CSS表格 3</td>
  </tr>
  <tr class="normalRow">
    <td>固定表头的CSS表格 1</td>
    <td>固定表头的CSS表格 2</td>
    <td>固定表头的CSS表格 3</td>
  </tr>
  <tr class="alternateRow">
    <td>固定表头的CSS表格 1</td>
    <td>固定表头的CSS表格 2</td>
    <td>固定表头的CSS表格 3</td>
  </tr>
  <tr class="normalRow">
    <td>固定表头的CSS表格 1</td>
    <td>固定表头的CSS表格 2</td>
    <td>固定表头的CSS表格 3</td>
  </tr>
  <tr class="alternateRow">
    <td>固定表头的CSS表格 1</td>
    <td>固定表头的CSS表格 2</td>
    <td>固定表头的CSS表格 3</td>
  </tr>
  <tr class="normalRow">
    <td>固定表头的CSS表格 1</td>
    <td>固定表头的CSS表格 2</td>
    <td>固定表头的CSS表格 3</td>
  </tr>
  <tr class="alternateRow">
    <td>固定表头的CSS表格 1</td>
    <td>固定表头的CSS表格 2</td>
    <td>固定表头的CSS表格 3</td>
  </tr>
  <tr class="normalRow">
    <td>固定表头的CSS表格 1</td>
    <td>固定表头的CSS表格 2</td>
    <td>固定表头的CSS表格 3</td>
  </tr>
  <tr class="alternateRow">
    <td>固定表头的CSS表格 1</td>
    <td>固定表头的CSS表格 2</td>
    <td>固定表头的CSS表格 3</td>
  </tr>
</tbody>
</table>
</div>


</body>
</html>