HTMLtable表格边框为单线的⽅法
因为平时在html页⾯中设计表格样式时，⼀般都是使⽤ DIV+CSS 的⽅式来实现，很少使⽤ table 表格元素，⽽今天图省事使⽤ table 表格元素时，发现设置其边框为的样式为双线的形式，所以就正对次问题，百度了⼀下解决⽅案。
table 表格的边框宽度不为 0 的样式
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">html网页设计 table
<title>Document</title>
</head>
<style>
table,table tr td {
border:1px solid #ccc;
}
table tr td{
padding:5px 10px;
}
</style>
<body>
<table>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</table>
</body>
</html>
代码运⾏结果：
通过下图可得知，table 的表格为双线的形式，但我们可以通过 css 中的 border-collapse 属性，将双线样式的边框合并为单线形式的边框。
css border-collapse属性
border-collapse：属性，为表格设置合并边框模型。
其属性值如下：
separate：默认值。边框会被分开。
collapse：将边框会合并为⼀个单线的边框
inherit：继承⽗元素的 border-collapse 属性的值，早期IE浏览器不⽀持此值。实现 table 的单线边框的办法
为 table 表格的样式，为⼊ border-collapse 属性即可
修改以上代码中的，样式如下
运⾏结果：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。