border-collapse 属性是个简单实用的属性。

　　以前表格的border大多直接写在table里，如：

　　<table width="500" border="1" cellspacing="1" cellpadding="1"> 　　<tr> 　　<td scope="col"> </td> 　　</tr> 　　</table>

　　现在的越来越多的人用css，来定义表格的一像素边框，那该如何写呢？ 　

　　表格的边框有整个表格的外边框，表格内th,td的表框，如果都写border:1px solid #666; 　

　　那这样的话就会出现重复的边，如： 　

　　这里就体现出border-collapse 属性的好处。 　

　　border-collapse 属性，设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。

　　如何为表格设置合并边框模型？

        可参考以下样式：

　　<style type="text/css"> 　　table.gridtable { 　　font-family: verdana,arial,sans-serif; 　　font-size:11px; 　　color:#333333; 　　border:1px solid #666; 　　border-collapse: collapse; 　　} 　　table.gridtable th { 　　padding: 8px; 　　border:1px solid #666; 　　background-color: #dedede; 　　} 　　table.gridtable td { 　　padding: 8px; 　　background-color: #ffffff; 　　border:1px solid #666; 　　} 　　</style> 　　Html： 　　<table class="gridtable"> 　　<tr> 　　<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th> 　　</tr> 　　<tr> 　　<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td> 　　</tr> 　　<tr> 　　<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td> 　　</tr> 　　</table>

　　同样的样式，只是加了border-collapse: collapse;就有不同的表现形式

　　本文章均为中睿原创或编译，转载请注明：文章来自中睿，本站保留追究责任的权利。