CSS实现表头冻结效果的方法

相信很多新手用户们对于CSS实现表头冻结效果的方法都是非常好奇的,那么今天就让爱站小编为大家详细介绍CSS是如何实现表头冻结效果的内容吧,如果还不了解的小伙伴们可以一起开参考参考。

复制代码

代码如下:

 


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”><head>

<title>Pure CSS Scrollable Table with Fixed Header</title>

<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″ />

<meta http-equiv=”language” content=”en-us” />

<script type=”text/javascript”>

<!–

function removeClassName (elem, className) {

elem.className = elem.className.replace(className, “”).trim();

}

function addCSSClass (elem, className) {

removeClassName (elem, className);

elem.className = (elem.className + ” ” + className).trim();

}

String.prototype.trim = function() {

return this.replace( /^\s+|\s+$/, “” );

}

function stripedTable() {

if (document.getElementById && document.getElementsByTagName) {

var allTables = document.getElementsByTagName(‘table’);

if (!allTables) { return; }

for (var i = 0; i < allTables.length; i++) {

if (allTables[i].className.match(/[\w\s ]*scrollTable[\w\s ]*/)) {

var trs = allTables[i].getElementsByTagName(“tr”);

for (var j = 0; j < trs.length; j++) {

removeClassName(trs[j], ‘alternateRow’);

addCSSClass(trs[j], ‘normalRow’);

}

for (var k = 0; k < trs.length; k += 2) {

removeClassName(trs[k], ‘normalRow’);

addCSSClass(trs[k], ‘alternateRow’);

}

}

}

}

}

window.onload = function() { stripedTable(); }

–>

</script>

<style type=”text/
css.html” target=”_blank”>
css“>

<!–

/* Terence Ordona, portal[AT]imaputz[DOT]com */

/* http://creativecommons.org/licenses/by-sa/2.0/ */

/* begin some basic styling here */

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

}

h1 {

font: normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif;

margin: 0 0 5px 0

}

h2 {

font: normal normal 16px Verdana, Geneva, Arial, Helvetica, sans-serif;

margin: 0 0 5px 0

}

h3 {

font: normal normal 13px Verdana, Geneva, Arial, Helvetica, sans-serif;

color: #008000;

margin: 0 0 15px 0

}

/* end basic styling */

/* define height and width of scrollable area. Add 16px to width for scrollbar */

div.tableContainer {

clear: both;

border: 1px solid #963;

height: 285px;

overflow: auto;

width: 756px

}

/* Reset overflow value to hidden for all non-IE browsers. */

html>body div.tableContainer {

overflow: hidden;

width: 756px

}

/* define width of table. IE browsers only */

div.tableContainer table {

float: left;

width: 740px

}

/* define width of table. Add 16px to width for scrollbar. */

/* All other non-IE browsers. */

html>body div.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

}

/* 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 */

html>body thead.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: left

}

/* 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 */

html>body tbody.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: none;

border-left: none;

border-right: 1px solid #CCC;

border-top: 1px solid #DDD;

padding: 2px 3px 3px 4px

}

tbody.scrollContent tr.alternateRow td {

background: #EEE;

border-bottom: none;

border-left: none;

border-right: 1px solid #CCC;

border-top: 1px solid #DDD;

padding: 2px 3px 3px 4px

}

/* define width of TH elements: 1st, 2nd, and 3rd respectively. */

/* Add 16px to last TH for scrollbar padding. All other non-IE browsers. */

/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */

html>body thead.fixedHeader th {

width: 200px

}

html>body thead.fixedHeader th + th {

width: 240px

}

html>body thead.fixedHeader th + th + th {

width: 316px

}

/* define width of TD elements: 1st, 2nd, and 3rd respectively. */

/* All other non-IE browsers. */

/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */

html>body tbody.scrollContent td {

width: 200px

}

html>body tbody.scrollContent td + td {

width: 240px

}

html>body tbody.scrollContent td + td + td {

width: 300px

}

–>

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

</tr>

</thead>

<tbody class=”scrollContent”>

<tr>

<td>Cell Content 1</td>

<td>Cell Content 2</td>

<td>Cell Content 3</td>

</tr>

<tr>

<td>More Cell Content 1</td>

<td>More Cell Content 2</td>

<td>More Cell Content 3</td>

</tr>

<tr>

<td>Even More Cell Content 1</td>

<td>Even More Cell Content 2</td>

<td>Even More Cell Content 3</td>

</tr>

<tr>

<td>And Repeat 1</td>

<td>And Repeat 2</td>

<td>And Repeat 3</td>

</tr>

<tr>

<td>Cell Content 1</td>

<td>Cell Content 2</td>

<td>Cell Content 3</td>

</tr>

<tr>

<td>More Cell Content 1</td>

<td>More Cell Content 2</td>

<td>More Cell Content 3</td>

</tr>

<tr>

<td>Even More Cell Content 1</td>

<td>Even More Cell Content 2</td>

<td>Even More Cell Content 3</td>

</tr>

<tr>

<td>And Repeat 1</td>

<td>And Repeat 2</td>

<td>And Repeat 3</td>

</tr>

<tr>

<td>Cell Content 1</td>

<td>Cell Content 2</td>

<td>Cell Content 3</td>

</tr>

<tr>

<td>More Cell Content 1</td>

<td>More Cell Content 2</td>

<td>More Cell Content 3</td>

</tr>

<tr>

<td>Even More Cell Content 1</td>

<td>Even More Cell Content 2</td>

<td>Even More Cell Content 3</td>

</tr>

<tr>

<td>And Repeat 1</td>

<td>And Repeat 2</td>

<td>And Repeat 3</td>

</tr>

<tr>

<td>Cell Content 1</td>

<td>Cell Content 2</td>

<td>Cell Content 3</td>

</tr>

<tr>

<td>More Cell Content 1</td>

<td>More Cell Content 2</td>

<td>More Cell Content 3</td>

</tr>

<tr>

<td>Even More Cell Content 1</td>

<td>Even More Cell Content 2</td>

<td>Even More Cell Content 3</td>

</tr>

<tr>

<td>And Repeat 1</td>

<td>And Repeat 2</td>

<td>And Repeat 3</td>

</tr>

<tr>

<td>Cell Content 1</td>

<td>Cell Content 2</td>

<td>Cell Content 3</td>

</tr>

<tr>

<td>More Cell Content 1</td>

<td>More Cell Content 2</td>

<td>More Cell Content 3</td>

</tr>

<tr>

<td>Even More Cell Content 1</td>

<td>Even More Cell Content 2</td>

<td>Even More Cell Content 3</td>

</tr>

<tr>

<td>And Repeat 1</td>

<td>And Repeat 2</td>

<td>And Repeat 3</td>

</tr>

<tr>

<td>Cell Content 1</td>

<td>Cell Content 2</td>

<td>Cell Content 3</td>

</tr>

<tr>

<td>More Cell Content 1</td>

<td>More Cell Content 2</td>

<td>More Cell Content 3</td>

</tr>

<tr>

<td>Even More Cell Content 1</td>

<td>Even More Cell Content 2</td>

<td>Even More Cell Content 3</td>

</tr>

<tr>

<td>And Repeat 1</td>

<td>And Repeat 2</td>

<td>And Repeat 3</td>

</tr>

<tr>

<td>Cell Content 1</td>

<td>Cell Content 2</td>

<td>Cell Content 3</td>

</tr>

<tr>

<td>More Cell Content 1</td>

<td>More Cell Content 2</td>

<td>More Cell Content 3</td>

</tr>

<tr>

<td>Even More Cell Content 1</td>

<td>Even More Cell Content 2</td>

<td>Even More Cell Content 3</td>

</tr>

<tr>

<td>And Repeat 1</td>

<td>And Repeat 2</td>

<td>And Repeat 3</td>

</tr>

<tr>

<td>Cell Content 1</td>

<td>Cell Content 2</td>

<td>Cell Content 3</td>

</tr>

<tr>

<td>More Cell Content 1</td>

<td>More Cell Content 2</td>

<td>More Cell Content 3</td>

</tr>

<tr>

<td>Even More Cell Content 1</td>

<td>Even More Cell Content 2</td>

<td>Even More Cell Content 3</td>

</tr>

<tr>

<td>And Repeat 1</td>

<td>And Repeat 2</td>

<td>And Repeat 3</td>

</tr>

<tr>

<td>Cell Content 1</td>

<td>Cell Content 2</td>

<td>Cell Content 3</td>

</tr>

<tr>

<td>More Cell Content 1</td>

<td>More Cell Content 2</td>

<td>More Cell Content 3</td>

</tr>

<tr>

<td>Even More Cell Content 1</td>

<td>Even More Cell Content 2</td>

<td>Even More Cell Content 3</td>

</tr>

<tr>

<td>And Repeat 1</td>

<td>And Repeat 2</td>

<td>And Repeat 3</td>

</tr>

<tr>

<td>Cell Content 1</td>

<td>Cell Content 2</td>

<td>Cell Content 3</td>

</tr>

<tr>

<td>More Cell Content 1</td>

<td>More Cell Content 2</td>

<td>More Cell Content 3</td>

</tr>

<tr>

<td>Even More Cell Content 1</td>

<td>Even More Cell Content 2</td>

<td>Even More Cell Content 3</td>

</tr>

<tr>

<td>And Repeat 1</td>

<td>And Repeat 2</td>

<td>And Repeat 3</td>

</tr>

<tr>

<td>Cell Content 1</td>

<td>Cell Content 2</td>

<td>Cell Content 3</td>

</tr>

<tr>

<td>More Cell Content 1</td>

<td>More Cell Content 2</td>

<td>More Cell Content 3</td>

</tr>

<tr>

<td>Even More Cell Content 1</td>

<td>Even More Cell Content 2</td>

<td>Even More Cell Content 3</td>

</tr>

<tr>

<td>End of Cell Content 1</td>

<td>End of Cell Content 2</td>

<td>End of Cell Content 3</td>

</tr>

</tbody>

</table>

</div>

</body></html>
上文中小编为大家介绍了CSS实现表头冻结效果的方法,css表头冻结效果在某些场合中还是比较实用的,感兴趣的朋友可以了解下。