用CSS制作表头固定的表格
2007-11-14 09:33
435 查看
导读:
网页制作中,通常用表格来以行和列的方式来组织数据。可能在使用中会遇到这种情况,我们所要列出的数据很多很长。这时候,浏览起来就很不方便,察看后面数据的时候不得不经常滚动到页面的上方来看看对应的表头。
要解决这个问题,通常我们会想到使用框架或者内置框架(iframe)的方式,将表头内容放在上方的框架页面中,表格内容放在下面的框架中,这样浏览起来就比较方便了。可是,使用框架并不是很好的选择。
这里介绍一个更好的方法,使用简单的CSS就能够实现表头固定的表格(在IE和Firefox、Mozilla下通过)。
这个方法是通过在一个两行一列的表格中,上面一行放置作为表头的表格,下面一行放置一个滚动的Div块,块里面内置有包含数据内容的表格。具体做法如下:
首先,我们制作一个表格,只包含两行一列:
此表格的结果如下:
行一 列一
行二 列二
接下来呢,我们在上面这个表格的第一行的单元格内嵌入作为表头的表格,如下:
我们看到的结果如下:
商场本月销售统计表
商品名 上旬 中旬 下旬
行二 列二
作为表头的表格的最后一个单元格,内容为空。留空的原因,是因为将来在下面的数据内容中,会出现滚动条,它也是占据一定的大小的,为了上下对齐,这里就考虑留空了。
下面,我们在下一行,也就是“行二 列二”所在的单元格中,加入一块(DIV),此块内包含了一个以表格排列的数据。注意这里块(DIV)的CSS设置:overflow:auto。它是说在内容超出块的情况下,自动显示滚动条。另外,这里的单元格填充大小可以自行设定,如果为“0”,你可能会发现上下没有对齐,此时你可以适当加大单元格填充。话代码如下:
之后呢,把它嵌入到最外面那个表格的第二行的单元格内,结果如下:
商场本月销售统计表
商品名 上旬 中旬 下旬
洗洁精 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
接下来,把这个表格美化一下,就可以看到下面这个不错的表头固定、数据可滚动的特殊表格了:
商场本月销售统计表
商品名 上旬 中旬 下旬
洗洁精 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
这个例子的关键在于表格中内嵌了属性为overflow:auto的DIV。熟悉CSS的都应该知道,overflow还可以设置为scroll的值,也就是overflow:scroll,它的作用是让DIV在需要的时候,垂直方向和水平方向都加上滚动条。
利用这个特点,我们同样可以制作左边固定,而右边滚动的数据表格出来。
本文转自
http://industry.ccidnet.com/art/1155/20041104/798329_1.html
网页制作中,通常用表格来以行和列的方式来组织数据。可能在使用中会遇到这种情况,我们所要列出的数据很多很长。这时候,浏览起来就很不方便,察看后面数据的时候不得不经常滚动到页面的上方来看看对应的表头。
要解决这个问题,通常我们会想到使用框架或者内置框架(iframe)的方式,将表头内容放在上方的框架页面中,表格内容放在下面的框架中,这样浏览起来就比较方便了。可是,使用框架并不是很好的选择。
这里介绍一个更好的方法,使用简单的CSS就能够实现表头固定的表格(在IE和Firefox、Mozilla下通过)。
这个方法是通过在一个两行一列的表格中,上面一行放置作为表头的表格,下面一行放置一个滚动的Div块,块里面内置有包含数据内容的表格。具体做法如下:
首先,我们制作一个表格,只包含两行一列:
行一 列一 |
行二 列二 |
行一 列一
行二 列二
接下来呢,我们在上面这个表格的第一行的单元格内嵌入作为表头的表格,如下:
商场本月销售统计表 | ||||
商品名 | 上旬 | 中旬 | 下旬 |
商场本月销售统计表
商品名 上旬 中旬 下旬
行二 列二
作为表头的表格的最后一个单元格,内容为空。留空的原因,是因为将来在下面的数据内容中,会出现滚动条,它也是占据一定的大小的,为了上下对齐,这里就考虑留空了。
下面,我们在下一行,也就是“行二 列二”所在的单元格中,加入一块(DIV),此块内包含了一个以表格排列的数据。注意这里块(DIV)的CSS设置:overflow:auto。它是说在内容超出块的情况下,自动显示滚动条。另外,这里的单元格填充大小可以自行设定,如果为“0”,你可能会发现上下没有对齐,此时你可以适当加大单元格填充。话代码如下:
洗洁精 | 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
洗洁精 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
洗洁精 2321 4521 1203
高录洁 1652 2541 3652
这个例子的关键在于表格中内嵌了属性为overflow:auto的DIV。熟悉CSS的都应该知道,overflow还可以设置为scroll的值,也就是overflow:scroll,它的作用是让DIV在需要的时候,垂直方向和水平方向都加上滚动条。
利用这个特点,我们同样可以制作左边固定,而右边滚动的数据表格出来。
本文转自
http://industry.ccidnet.com/art/1155/20041104/798329_1.html
相关文章推荐
- 用CSS制作表头固定的表格
- CSS实现表格表头(thead)固定,内容(tbody)滚动
- CSS实现表头固定的表格
- CSS固定表格表头
- 推荐:用CSS实现的固定表头的HTML表格
- 纯css的 表头固定的滚动表格
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
- 适用于IE的固定表头和列的表格样式[CSS]
- CSS教程,CSS固定表头的HTML表格
- 纯css控制-表格表头固定,内容多时滚动内容
- table表头和首列的表格固定-CSS实现的Table表头固定
- jQuery制作多表格固定表头、切换表头的特效
- table表头和首列的表格固定-CSS实现的Table表头固定
- css固定table表头的实现代码可同时看到表头和表格底部
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
- 使用EXCEL 2007制作表格时,在下拉过程中使表头固定不动 冻结窗格(转载)
- css固定表格表头(各浏览器通用)
- CSS实现固定表头 HTML表格
- div+css实现表头固定内容滚动表格
- css 固定表头的表格,和 width:auto, margin:auto等 自计算方法