HTML创建的表格显示为独立单元格框 如何调整为常规表格

HTML表格边框异常修复方案 #

你遇到的是表格边框未合并导致的单元格独立显示问题，按以下操作调整即可实现常规表格效果：

• 给<table>标签添加border-collapse: collapse CSS属性，该属性会自动合并相邻单元格的边框，避免出现独立小框
• 统一为<table>、<th>、<td>设置边框样式，不要单独给每个单元格添加边框属性
• 可额外添加padding属性调整文字与边框的间距，优化显示效果

可用参考代码 #

<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px 12px;
  text-align: left;
}
th {
  background-color: #f5f5f5;
}
</style>

<table>
  <tr>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>
  </tr>
  <tr>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
  </tr>
  <tr>
    <td>内容4</td>
    <td>内容5</td>
    <td>内容6</td>
  </tr>
</table>

如果调整后问题仍存在，检查原有代码中是否给、设置了额外的margin属性，或是每个单元格内嵌套了带边框的独立元素，删除对应多余样式即可。

内容的提问来源于stack exchange，提问作者23 Daniël