如何去除表格边框内的内边距？

要实现单元格内容紧贴边框的效果，仅设置padding:0没生效，是因为需要把样式明确应用到<th>和<td>元素上，同时修正HTML结构的不规范问题。以下是具体解决方案：

修改后的完整代码 #

<style>
  table {
    border: 2px solid;
    border-collapse: collapse; /* 让表格与单元格边框合并，匹配示例图效果 */
  }
  th, td {
    border: 2px solid;
    padding: 0; /* 彻底移除单元格内边距 */
  }
</style>
<table>
  <tr>
    <th>Location</th>
    <th>Topic</th>
  </tr>
  <tr>
    <td>New York</td>
    <td>San Francisco</td>
  </tr>
  <tr>
    <td>Javascript & JQuery</td>
    <td>HTML & CSS</td>
  </tr>
</table>

关键调整点 #

• 修正HTML结构：原代码里<th>直接放在<table>下不符合规范，必须包裹在<tr>内，否则可能导致样式解析异常。
• 精准设置padding：浏览器默认会给<th>和<td>添加内边距，必须直接给这两个元素设置padding:0才能生效，仅设置表格的padding没用。
• 边框合并（可选）：border-collapse: collapse能让表格边框与单元格边框合并为单一线条，和示例图的视觉效果一致，若不需要合并边框可移除该属性。

内容的提问来源于stack exchange，提问作者joohyo1