用CSS制作表头固定的表格

css

网页制作中，通常用表格来以行和列的方式来组织数据。可能在使用中会遇到这种情况，我们所要列出的数据很多很长。这时候，浏览起来就很不方便，察看后面数据的时候不得不经常滚动到页面的上方来看看对应的表头。

要解决这个问题，通常我们会想到使用框架或者内置框架（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>

之后呢，把它嵌入到最外面那个表格的第二行的单元格内，结果如下：

接下来，把这个表格美化一下，就可以看到下面这个不错的表头固定、数据可滚动的特殊表格了：

这个例子的关键在于表格中内嵌了属性为overflow:auto的DIV。熟悉CSS的都应该知道，overflow还可以设置为scroll的值，也就是overflow:scroll，它的作用是让DIV在需要的时候，垂直方向和水平方向都加上滚动条。

利用这个特点，我们同样可以制作左边固定，而右边滚动的数据表格出来。