当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS教程,CSS固定表头的HTML表格

CSS样式表
让图片 div居中实现代码
去掉点击链接时周围的虚线框outline属性
CSS 优先级 详细分析
广告始终定位到网页右下角 css
superLink 让伪链接更有可用性
CSS 模块化 实现方法
css 选择器 介绍
CSS 语法 学习css入门者看
firefox 滚动条消失引起页面抖动的问题
纯CSS定位的固定垂直居中浮动层代码，附经典解说 《详解定位与定位应用》
渲染CSS选择器
CSS 兼容问题
css textarea 高度自适应,无滚动条
CSS 网页表单实现鼠标悬停交互效果
鼠标激活显示背景色网页特效CSS代码
CSS制作用户登录和用户注册的用户体验表单
CSS代码 注释的3种方法
网页头部css代码优化实例
IE7和IE8的兼容性问题
CSS 网页布局网页制作技巧总结

No. « 19 20 21 22 »

技术文章搜索

关键字

CSS样式表 中的 CSS教程,CSS固定表头的HTML表格

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-11   浏览: 145 ::
收藏到网摘: n/a


　　用CSS实现的固定表头的HTML表格。
曾经在项目中实现过一个固定表头的HTML表格，但使用了非常臃肿的代码，因为实际上是画了三个一样的表格。一个纯粹用HTML和CSS实现的固定表头的表格，其简化代码如下：
                         <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;
/* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution */
top: expression(document.getElementById("tableContainer").scrollTop)
/* set THEAD element to have block level attributes. All other non-IE browsers */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* Filter out Opera 5.x/6.x and MacIE 5.x */
head:first-child body thead[class].fixedHeader tr {
display: block
}
/* make the TH elements pretty */
thead.fixedHeader th {
background: #C96;
border-left: 1px solid #EB8;
border-right: 1px solid #B74;
border-top: 1px solid #EB8;
font-weight: normal;
padding: 4px 3px;
text-align: center
}
/* make the A elements pretty. makes for nice clickable headers */
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
color: #FFF;
display: block;
text-decoration: none;
width: 100％
}
/* make the A elements pretty. makes for nice clickable headers */
/* WARNING: swapping the background on hover may cause problems in WinIE 6.x */
thead.fixedHeader a:hover {
color: #FFF;
display: block;
text-decoration: underline;
width: 100％
}
/* define the table content to be scrollable */
/* set TBODY element to have block level attributes. All other non-IE browsers */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* induced side effect is that child TDs no longer accept width: auto */
/* Filter out Opera 5.x/6.x and MacIE 5.x */
head:first-child body tbody[class].scrollContent {
display: block;
height: 262px;
overflow: auto;
width: 100％
}
/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/ */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
background: #FFF;
border-bottom: 1px solid #EEE;
border-left: 1px solid #EEE;
border-right: 1px solid #AAA;
border-top: 1px solid #AAA;
padding: 2px 3px
}
tbody.scrollContent tr.alternateRow td {
background: #EEE;
border-bottom: 1px solid #EEE;
border-left: 1px solid #EEE;
border-right: 1px solid #AAA;
border-top: 1px solid #AAA;
padding: 2px 3px
}
/* define width of TH elements: 1st, 2nd, and 3rd respectively. */
/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */
/* Add 16px to last TH for scrollbar padding */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */
head:first-child body thead[class].fixedHeader th {
width: 200px
}
head:first-child body thead[class].fixedHeader th   th {
width: 250px
}
head:first-child body thead[class].fixedHeader th   th   th {
border-right: none;
padding: 4px 4px 4px 3px;
width: 316px
}
/* define width of TH elements: 1st, 2nd, and 3rd respectively. */
/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */
/* Add 16px to last TH for scrollbar padding */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */
head:first-child body tbody[class].scrollContent td {
width: 200px
}
head:first-child body tbody[class].scrollContent td   td {
width: 250px
}
head:first-child body tbody[class].scrollContent td   td   td {
border-right: none;
padding: 2px 4px 2px 3px;
width: 300px
/* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution */
top: expression(document.getElementById("tableContainer").scrollTop)
}
-->
</style>
</head><body>
<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100％" class="scrollTable">
<thead class="fixedHeader">
<tr>
<th><a href="#">Header 1</a></th>
<th><a href="#">Header 2</a></th>
<th><a href="#">Header 3</a></th>
<th><a href="#">Header 4</a></th>
<th><a href="#">Header 5</a></th>
<th><a href="#">Header 6</a></th>
<th><a href="#">Header 7</a></th>
</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
<td>Cell Content 4</td>
<td>Cell Content 5</td>
<td>Cell Content 6</td>
<td>Cell Content 7</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
<td>More Cell Content 4</td>
<td>More Cell Content 5</td>
<td>More Cell Content 6</td>
<td>More Cell Content 7</td>
</tr>
<tr>
<td nowrap>Even More Cell Content 1</td>
<td nowrap>Even More Cell Content 2</td>
<td nowrap>Even More Cell Content 3</td>
<td nowrap>Even More Cell Content 4</td>
<td nowrap>Even More Cell Content 5</td>
<td nowrap>Even More Cell Content 6</td>
<td nowrap>Even More Cell Content 7</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
<td>And Repeat 4</td>
<td>And Repeat 5</td>
<td>And Repeat 6</td>
<td>And Repeat 7</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>