如何修改HTML table表格的内外边框大小使其粗细一致

数据老陈

2026-10-19

解决方法

你遇到的内外边框粗细不一致的问题，核心是默认表格外边框和单元格边框是分离渲染的，给设置的border属性仅作用于外框，单元格默认边框宽度更小，才会出现外粗内细的效果。

要实现内外边框粗细完全一致，只需给表格添加border-collapse: collapse属性合并相邻边框，同时给

单元格也设置统一的边框样式即可，有两种常用实现方案：

方案1：直接用内联样式修改原代码

<table bordercolor="#F9864D" style="background-color:#EFEFEF; border-collapse: collapse; border: 5px solid #F9864D;" width="450" cellpadding="0" cellspacing="0">
<tr>
<td style="border: 5px solid #F9864D;">Table Cell</td>
<td style="border: 5px solid #F9864D;">Table Cell</td>
<td style="border: 5px solid #F9864D;">Table Cell</td>
</tr>
<tr>
<td style="border: 5px solid #F9864D;">Table Cell</td>
<td style="border: 5px solid #F9864D;">Table Cell</td>
<td style="border: 5px solid #F9864D;">Table Cell</td>
</tr>
<tr>
<td style="border: 5px solid #F9864D;">Table Cell</td>
<td style="border: 5px solid #F9864D;">Table Cell</td>
<td style="border: 5px solid #F9864D;">Table Cell</td>
</tr>
</table>

方案2：用公共样式统一控制（更易维护）

如果表格单元格数量多，建议单独定义样式规则，避免重复写内联样式：

<!-- 样式规则可以放在页面<head>标签内 -->
<style>
.custom-table {
  background-color: #EFEFEF;
  width: 450px;
  border-collapse: collapse;
  border: 5px solid #F9864D;
  padding: 0;
  margin: 0;
}
.custom-table td {
  border: 5px solid #F9864D;
}
</style>

<!-- 表格部分代码更简洁 -->
<table class="custom-table" cellpadding="0" cellspacing="0">
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</table>