CSS 解决方案
在表格内设置边框的问题是在所有单元格周围添加完整边框。
因此，我们在整个表格周围添加了边框。
取而代之的是，在任何地方添加边框，然后在需要的地方删除边框。
为此，我们需要具有“collapse”值的 border-collapse 属性、:first-child 和 :last-child 伪类。
在表格内添加边框的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
table {
border-collapse: collapse;
}
table td,
table th {
border: 1px solid #000;
}
table tr:first-child th {
border-top: 0;
}
table tr:last-child td {
border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
border-right: 0;
}
</style>
</head>
<body>
<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Hello World</td>
<td>Hello World</td>
</tr>
<tr>
<td>Hello World</td>
<td>Hello World</td>
</tr>
</table>
</body>
</html>
另一种仅在表格内部设置边框的方法是使用设置为“隐藏”的 CSS 边框样式属性。
该值比表格单元格和边框折叠具有更高的优先级。
因此，在表格上使用“隐藏”值设置边框样式属性将不会显示外部边框。
让我们来看看它。
使用 border-style 属性在表格内添加边框的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
table {
margin: 0 auto;
border-collapse: collapse;
border-style: hidden;
}
table td {
padding: 30px;
border: 3px solid #0044b3;
}
</style>
</head>
<body>
<table>
<tr>
<td>Hello World</td>
<td>Hello World</td>
<td>Hello World</td>
</tr>
<tr>
<td>Hello World</td>
<td>Hello World</td>
<td>Hello World</td>
</tr>
</table>
</body>
</html>
有时，使用表格会导致一些困难，例如，当我们只需要在表格内添加边框时。
幸运的是，我们将在此代码中演示此问题的一些解决方案。
日期：2020-06-02 22:15:04 来源：oir作者：oir