代码实例
<!DOCTYPE HTML>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
th, td {
padding: 2px;
}
</style>
</head>
<body>
<table border="1">
<caption>Results of Survey</caption>
<colgroup id="colgroup1">
<col id="col1And2" span="2"/>
<col id="col3"/>
</colgroup>
<colgroup id="colgroup2" span="2"/>
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Color</th>
<th colspan="2">Size</th>
</tr>
</thead>
<tbody>
<tr>
<th>Favorite:</th>
<td>A</td>
<td>B</td>
<td>C</td>
<td>500</td>
</tr>
<tr>
<th>2nd Favorite:</th>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">EyouCms是基于TP5.0框架为核心开发的免费</th>
</tr>
</tfoot>
</table>
</body>
</html> 尝试一下 »
点击“尝试一下”按钮查看在线实例
border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
其可能的值是折叠或单独。
浏览器在表格周围绘制边框加上每个单元格周围的边框，创建双边框效果。您可以通过应用border-collapse属性解决此问题。
折叠值告诉浏览器您不想在相邻元素的每个边上绘制边框。
