如何让Div Table/原生Table边框无缝连接并实现圆角效果？

问题说明 #

我需要实现边框无缝连接的表格（可以用Div模拟或原生Table），达到目标样式效果。尝试用原生Table替代Div Table后，仍存在边框间隙，同时无法实现角落的border-radius，底部线条也无法正常连接，求解决方法。

解决方案 #

方案一：原生Table（推荐，语义化更优） #

原生Table解决边框间隙的核心是border-collapse: collapse，圆角可以通过给表格容器加overflow: hidden和border-radius实现，同时调整单元格边框避免冲突：

1. 给table标签添加border-collapse: collapse，消除边框间隙
2. 用一个容器包裹table，给容器加border-radius和overflow: hidden，实现整体圆角
3. 单元格统一设置边框，避免重复叠加

修改后的代码示例：

HTML

<div class="table-container">
  <table class="native-table">
    <thead>
      <tr>
        <th></th>
        <th>company</th>
        <th>company</th>
        <th>company</th>
        <th>company</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, aut.</td>
        <td>✔️</td>
        <td>❌</td>
        <td>✔️</td>
        <td>✔️</td>
      </tr>
      <tr>
        <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, aut.</td>
        <td>✔️</td>
        <td>✔️</td>
        <td>❌</td>
        <td>✔️</td>
      </tr>
      <tr>
        <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, aut.</td>
        <td>✔️</td>
        <td>✔️</td>
        <td>✔️</td>
        <td>❌</td>
      </tr>
      <tr>
        <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, aut.</td>
        <td>✔️</td>
        <td>❌</td>
        <td>✔️</td>
        <td>❌</td>
      </tr>
      <tr>
        <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, aut.</td>
        <td>✔️</td>
        <td>✔️</td>
        <td>❌</td>
        <td>✔️</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="table__btns">
  <div class="table__btn"><a href="#" class="table__btn__el">Get Started</a></div>
  <div class="table__btn"><a href="#" class="table__btn__el table__btn__el--black">Get Started</a></div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100%;
  width: 100vw;
  overflow-x: hidden;
  padding-top: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.table-container {
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.native-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 600px;
}

.native-table th,
.native-table td {
  border: 1px solid #dadada;
  padding: 1rem 2rem;
  height: 55px;
  text-align: left;
}

.native-table th {
  background-color: #f5f5f5;
}

.table__btns {
  display: flex;
  gap: 1rem;
}

.table__btn {
  display: flex;
  justify-content: center;
}

.table__btn__el {
  width: 150px;
  background-color: #1f48ff;
  border: none;
  border-radius: 5px;
  padding: 1rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  text-align: center;
}

.table__btn__el:hover {
  background-color: #152569;
}

.table__btn__el--black {
  background-color: #000;
}

方案二：修正Div模拟表格的问题 #

如果坚持用Div模拟，需要调整布局和边框重叠逻辑：

1. 给.table添加flex-wrap: nowrap，避免换行导致列错位
2. 移除.table__row的margin-right: 1rem，消除列之间的间隙
3. 统一单元格的边框设置，确保上下左右边框无缝重叠
4. 给最外层的.table容器加border-radius和overflow: hidden，实现整体圆角

修改后的核心CSS调整：

.table {
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
  border-radius: 5px;
  overflow: hidden;
  flex-wrap: nowrap;
}

.table__row {
  min-width: 150px;
}

.table__row__desc {
  min-width: 250px;
}

.table p {
  padding: 1rem 2rem;
  border: 1px solid #dadada;
  margin: 0;
  height: 55px;
  border-right: none;
  border-bottom: none;
}

.table__row:last-child p,
.table__row__desc:last-child p {
  border-right: 1px solid #dadada;
}

.table__row p:last-child,
.table__row__desc p:last-child {
  border-bottom: 1px solid #dadada;
}

关键知识点总结 #

• 原生Table用border-collapse: collapse彻底解决边框间隙，配合容器overflow:hidden实现圆角
• Div模拟表格时，要确保列之间无额外margin，通过控制单元格的边框显示（比如只保留右和下边框，最后一列/行补全）来避免重叠间隙
• 圆角效果优先通过容器裁剪实现，比单独给角落单元格加圆角更稳定

内容的提问来源于stack exchange，提问作者Filip Drábek