CSS如何实现表头冻结效果_ Div+Css教程-查字典教程网
CSS如何实现表头冻结效果
CSS如何实现表头冻结效果
发布时间:2016-12-27 来源:查字典编辑
摘要: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>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新 Div+Css教程学习
    热门 Div+Css教程学习
    网页设计子分类