手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >CSS如何实现表头冻结效果
CSS如何实现表头冻结效果
摘要:PureCSSScrollableTablewithFixedHeaderHeader1Header2Header3CellContent1...

<!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">

<>

</script>

<style type="text/css">

<>

</style>

</head><body>

<div id="tableContainer">

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<thead>

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

<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实现表单form布局

CSS相框效果示例代码

CSS 3实现DIV圆角效果完整代码

css3实现闪亮进度条效果

CSS知识总结

CSS常用样式效果

CSS如何定义一条水平虚线?

纯CSS实现漂亮tab选项卡切换特效

如何实现条状图表形式

CSS3 实用技巧:实现黑白图像效果示例代码

精品推荐
分类导航