纯HTML/CSS实现带部分边框表格单元格元素同尺寸无间隙咨询

需求说明 #

仅使用纯HTML和CSS实现满足以下要求的表格，且单元格之间无可见间隙：

• 单元格自身带有边框
• 单元格内部包含的元素尺寸与整个单元格完全一致

已尝试方案 #

已经尝试调整box-sizing和padding的多种组合，但均未达到预期效果。

实现方案 #

核心实现逻辑 #

1. 给表格添加border-collapse: collapse属性，合并相邻单元格边框，彻底消除单元格默认间隙
2. 清除单元格默认内边距，避免内部元素与单元格边缘产生空隙
3. 内部元素设置宽高100%配合box-sizing: border-box，保证完全撑满单元格，添加边框、内边距也不会溢出

完整代码示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>无间隙表格实现</title>
  <style>
    table {
      border-collapse: collapse;
      width: 400px; /* 可根据需求调整表格整体宽度 */
    }
    td {
      border: 1px solid #333;
      padding: 0;
      width: 50%;
      height: 80px; /* 可根据需求调整单元格高度 */
    }
    .inner {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      /* 可按需给内部元素添加样式，比如内边距、背景色等 */
      padding: 10px;
      background-color: #f5f5f5;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <td><div class="inner">单元格1内容</div></td>
      <td><div class="inner">单元格2内容</div></td>
    </tr>
    <tr>
      <td><div class="inner">单元格3内容</div></td>
      <td><div class="inner">单元格4内容</div></td>
    </tr>
  </table>
</body>
</html>

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