CSS教程,CSS固定表头的HTML表格
CSS教程,CSS固定表头的HTML表格
发布时间:2016-12-27 来源:查字典编辑
摘要:用CSS实现的固定表头的HTML表格。曾经在项目中实现过一个固定表头的HTML表格,但使用了非常臃肿的代码,因为实际上是画了三个一样的表格。...

用CSS实现的固定表头的HTML表格。

曾经在项目中实现过一个固定表头的HTML表格,但使用了非常臃肿的代码,因为实际上是画了三个一样的表格。一个纯粹用HTML和CSS实现的固定表头的表格,其简化代码如下:

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

<style type="text/css">

<>

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

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