带滚动条的table (ie only)

最新推荐文章于 2021-06-09 23:57:19 发布

原创最新推荐文章于 2021-06-09 23:57:19 发布 · 873 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#table #ie #border

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文提供了一个使用HTML和CSS进行表格布局的示例，展示了如何定义表格结构、设置单元格样式及实现滚动条等功能。此示例有助于理解基本的网页布局技巧。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312"  ></FCK:meta> 
<head> 
<style> 
body {background-color: #F0F0F0 ;  font: 11px "verdana","Arial"; width:90%; margin-left:auto; margin-right:auto; } 
.tScroll {border: 1px #7494BF solid; background-color: #ffffff; overflow: scroll; overflow-x:hidden; height:300px; cursor: default; } 
tr.tableHead { position:relative; background-color:#BFCEE7; height: 16px; text-align: center; } 
th, td { font: 11px "Verdana", "Arial"; border: #7494BF solid; border-width: 0px 1px 1px 0px; } 
table{width:100%; } 
</style> 
</head> 
<body> 
<div class="tScroll"> 
<table cellspacing="0"> 
<tr class="tableHead"> 
<th>heading1***************</th> 
<th>heading2</th> 
<th>heading3</th> 
<th>heading4*************</th> 
<th>heading5</th> 
<th>heading6****</th> 
</tr> 
<tr><td>cell1</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
<tr><td>cell n</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
</table> 
</div> 
</body> 
</html> 