基于ReactJS实现XD设计：如何让HTML表格内边框不与外边框相连？

当然可以仅用HTML和CSS实现这个效果！你当前的问题核心在于使用了border-collapse: collapse，这个属性会强制表格的内外边框完全合并，导致内边框和外边框连在一起。我们只需要调整CSS结构，把外边框和内边框的载体分开，就能轻松实现需求。

修改思路 #

把表格的外边框转移到外层的.d100容器上，通过给容器设置左右留白（padding），让内部表格的内边框和外边框之间产生间隙，同时保持表格内部的边框合并效果（方便实现行列分隔线）。

修改后的完整代码 #

CSS 代码

.d100 { 
  width: 100%; 
  border: 1px solid black; /* 外边框移到外层容器 */
  padding: 0 15px; /* 左右留白，让内边框不触碰外边框 */
  background-color: #faf9fe; /* 背景色移到外层容器 */
}
.d100 .table { 
  border-collapse: collapse; /* 保持内部边框合并 */
  width: 100%; 
}
.d100 .table thead { 
  border-bottom: 1px solid #ccc2c2; 
  color: black; 
}
.d100 .table thead th { 
  padding: 15px 0 15px 0; /* 移除左侧padding，外层容器的留白已提供间距 */
  text-align: left; 
}
.d100 .table tbody tr { 
  border-bottom: 1px solid #ccc2c2; 
}
.d100 .table tbody tr td { 
  text-align: left; 
  color: #666; 
  padding: 15px 0; /* 移除左右padding */
}
.d100 .table tbody tr td.green { color: green !important; }
.d100 .table tbody tr td.orange { color: orange !important; }
.d100 .table tbody tr td.red { color: red !important; }
.d100 .table tfoot tr td div { 
  display: flex; 
  text-align: center; 
  font-weight: bolder; 
  padding: 25px 10px; 
  justify-content: flex-end; /* 让分页按钮靠右对齐 */
}
.d100 .table tfoot tr td div img { 
  padding: 3px 10px 4px; 
  vertical-align: middle; 
}
.d100 .table tfoot tr td.orange { color: orange !important; }
.d100 .d10 { 
  display: inline-block; 
  vertical-align: middle; 
  min-width: 5%; 
}
.d100 .d90 { 
  display: inline-block; 
  width: 90%; 
  word-wrap: break-word; 
  word-break: break-all; 
}

HTML 代码（无需修改，直接沿用你的结构）

<div class='d100'>
  <table class='table'>
    <thead>
      <tr>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td></td><td></td><td></td><td></td>
        <td>
          <div>
            <span>Previous</span>
          </div>
        </td>
        <td>
          <div>
            <span>Next</span>
          </div>
        </td>
      </tr>
    </tfoot>
  </table>
</div>

适配 React 项目的说明 #

这个方案完全兼容 React 项目，不管你是使用全局 CSS、CSS Modules 还是 styled-components，只需要把修改后的 CSS 规则应用到对应的组件上即可——React 只是负责渲染 HTML 结构，CSS 的生效逻辑和普通网页完全一致。

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