用CSS制造表头固定的表格
日期：2013-06-12 浏览次数：21355 次
网页制造中，通常用表格来以行和列的方式来组织数据。可能在使用中会遇到这种情况，我们所要列出的数据很多很长。这时候，浏览起来就很不方便，察看后面数据的时候不得不经常滚动到页面的上方来看看对应的表头。
要处理这个问题，通常我们会想到使用框架或者内置框架（iframe）的方式，将表头内容放在上方的框架页面中，表格内容放在下面的框架中，这样浏览起来就比较方便了。可是，使用框架并不是很好的选择。
这里引见一个更好的方法，使用简单的CSS就能够实现表头固定的表格（在IE和Firefox、Mozilla下通过）。
这个方法是通过在一个两行一列的表格中，上面一行放置作为表头的表格，下面一行放置一个滚动的Div块，块里面内置有包含数据内容的表格。具体做法如下：
首先，我们制造一个表格，只包含两行一列：
<table summary="" cellpadding="0" cellspacing="0" align="center" title="" width="400">
<tr>
<td>行一 列一</td>
</tr>
<tr>
<td>行二 列二</td>
</tr>
</table>
此表格的结果如下：
| 行一 列一 |
| 行二 列二 |
接下来呢，我们在上面这个表格的第一行的单元格内嵌入作为表头的表格，如下：
<table summary="" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="5" align="center">商场本月销售统计表</td>
</tr>
<tr>
<td width="24%">商品名</td>
<td width="24%">上旬</td>
<td width="24%">中旬</td>
<td width="24%">下旬</td>
<td width="4%"> </td>
</tr>
</table>
我们看到的结果如下：
| ||||||||||
| 行二 列二 | ||||||||||
作为表头的表格的最后一个单元格，内容为空。留空的缘由，是由于将来在下面的数据内容中，会出现滚动条，它也是占据一定的大小的，为了上下对齐，这里就考虑留空了。
下面，我们在下一行，也就是“行二 列二”所在的单元格中，加入一块（DIV），此块内包含了一个以表格陈列的数据。留意这里块（DIV）的CSS设置：overflow:auto。它是说在内容超出块的情况下，自动显示滚动条。另外，这里的单元格填充大小可以自行设定，如果为“0”，你可能会发现上下没有对齐，此时你可以适当加大单元格填充。话代码如下：
<div style="height:150px; overflow: auto;">
<table summary="" cellpadding="12" cellspacing="0" width="96%">
<tr>
<td width="25%">洗洁精</td>
<td width="25%">2321</td>
<td width="25%">4521</td>
<td width="25%">1203</td>
</tr>
<tr>
<td width="25%">高录洁</td>
<td width="25%">1652</td>
<td width="25%">2541</td>
<td width="25%">3652</td>
</tr>
.
.
.
</table>
<div>
之后呢，把它嵌入到最外面那个表格的第二行的单元格内，结果如下：
| ||||||||||||||||||||||||
| ||||||||||||||||||||||||
