网站制作：用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在需要的时候，垂直方向和水平方向都加上滚动条。

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

posted on 2007-04-29 14:45 deepbluesea 阅读(414) 评论(0)  编辑  收藏 所属分类: 网站制作