用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>

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

商场本月销售统计表 商品名 上旬 中旬 下旬 洗洁精 2321 4521 1203 高录洁 1652 2541 3652 洗洁精 2321 4521 1203 高录洁 1652 2541 3652 洗洁精 2321 4521 1203 高录洁 1652 2541 3652 洗洁精 2321 4521 1203 高录洁 1652 2541 3652 洗洁精 2321 4521 1203 高录洁 1652 2541 3652 洗洁精 2321 4521 1203 高录洁 1652 2541 3652 洗洁精 2321 4521 1203 高录洁 1652 2541 3652 洗洁精 2321 4521 1203 高录洁 1652 2541 3652 洗洁精 2321 4521 1203 高录洁 1652 2541 3652

·CSS制作下拉导航菜单实例代码 ·div+css实现圆角边框 ·用CSS的float和clear创建三栏液态布局的方法 ·CSS制作带阴影的网站导航代码 ·30多个CSS滑动门菜单效果 ·CSS让图片垂直居中和底端对齐的代码 ·Div+CSS布局入门教程 ·使用CSS处理表格边框样式化 ·CSS实现表格边框阴影和背景渐变效果 ·CSS教程:用dl dt dd来制作列表 ·CSS：鼠标经过时改变背景颜色或图片 ·CSS+DIV+Javascript制作滑动门菜单技术 ·强烈推荐：30余个CSS导航菜单效果 ·CSS网页布局全精通 分享到: 0

栏目导航 Dreamweaver JavaScript 网页配色 html教程 网页制作 SEO技术 FrontPage 建站经验 网赚教程 相关文章 ·巧妙利用CSS自定义网页下划线样式 ·用CSS控制网页总体风格 ·用CSS轻松实现网上填空 ·用CSS实现鼠标单击特效 ·CSS样式表高效使用的技巧 ·深入了解CSS的继承性及其应用 ·用 iframe 解决下拉框与层之冲突 ·有关表格边框的css语法整理 ·样式表在web标准应用存在的问题 ·css布局中的居中问题 ·巧用CSS的Border属性 ·如何用css设置网页字体

本文来源于成都网站建设公司与成都网站设计制作公司-创新互联成都公司！

本文题目：用CSS制作表头固定的表格
标题路径：https://www.cdcxhl.com/news30/310930.html

成都网站建设公司_创新互联，为您提供小程序开发、虚拟主机、云服务器、网站导航、动态网站、面包屑导航

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联