推荐：用CSS实现的固定表头的HTML表格[1]|中文方案文档站(提供各类方案下载,WORD文档下载,范文,案例等)

曾经在项目中实现过一个固定表头的html表格，但使用了非常臃肿的代码，因为实际上是画了三个一样的表格。偶然的机会，发现了一个纯粹用html和css实现的固定表头的表格。现将其简化代码摘录如下。
原地址见： http://www.imaputz.com/cssstuff/bulletversion.html。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<style type="text/css">
<!--
body {
background: #fff;
color: #000;
font: normal normal 12px verdana, geneva, arial, helvetica, sans-serif;
margin: 10px;
padding: 0
}

table, td, a {
color: #000;
font: normal normal 12px verdana, geneva, arial, helvetica, sans-serif
}

.td
{
nowrap:'true';
}

div.tablecontainer {
clear: both;
border: 1px solid #963;
height: 285px;
overflow: auto;
width: 100%;
}

/* winie 6.x needs to re-account for it's scrollbar. give it some padding */
\html div.tablecontainer/* */ {
padding: 0 16px 0 0
}

/* clean up for allowing display opera 5.x/6.x and macie 5.x */
html>body div.tablecontainer {
height: auto;
padding: 0;
width: 740px
}

/* reset overflow value to hidden for all non-ie browsers. */
/* filter out opera 5.x/6.x and macie 5.x */
head:first-child+body div[class].tablecontainer {
height: 285px;
overflow: hidden;
width: 756px
}

/* define width of table. ie browsers only */
/* if width is set to 100%, you can remove the width */
/* property from div.tablecontainer and have the div scale */
div.tablecontainer table {
float: left;
width: 100%
}

/* winie 6.x needs to re-account for padding. give it a negative margin */
\html div.tablecontainer table/* */ {
margin: 0 -16px 0 0
}

/* define width of table. opera 5.x/6.x and macie 5.x */
html>body div.tablecontainer table {
float: none;
margin: 0;
width: 740px
}

/* define width of table. add 16px to width for scrollbar. */
/* all other non-ie browsers. filter out opera 5.x/6.x and macie 5.x */
head:first-child+body div[class].tablecontainer table {
width: 756px
}

/* set table header to a fixed position. winie 6.x only                                       */
/* in winie 6.x, any element with a position property set to relative and is a child of       */
/* an element that has an overflow property set, the relative value translates into fixed.    */
/* ex: parent element div with a class of tablecontainer has an overflow property set to auto */
thead.fixedheader tr {
position: relative;

首页下页尾页 [1] [2] [3] [4] [5] [6]

本文关键：推荐：用CSS实现的固定表头的HTML表格

　　相关方案

本站最佳浏览方式为分辨率 1024x768 IE 6.0（或更高版本的 IE浏览器）

推荐：用CSS实现的固定表头的HTML表格[1]

[入库：2005年8月18日] [更新：2007年3月24日]