如何为HTML生成器创建的表格添加圆角边框？

问题原因 #

你当前使用了 border-collapse: collapse，这个属性会合并表格单元格的边框，导致表格的 border-radius 无法生效——合并后的边框不会遵循圆角设置。

解决方案1：添加包裹容器（最小HTML改动） #

这是最简单的方法，无需大幅修改现有CSS，只需给表格套一个div容器：

HTML 修改

在表格外层添加带类名的div：

<div class="table-round-wrapper">
  <table class="tg" style="width: 100%;">
    <!-- 原表格内容保持不变 -->
  </table>
</div>

CSS 添加

.table-round-wrapper {
  border-radius: 12px; /* 可调整为你需要的圆角大小 */
  overflow: hidden;
  width: 100%; /* 和表格宽度保持一致 */
}

该方法利用容器的 overflow: hidden 裁剪表格直角边角为圆角，完全兼容你现有的表格结构和CSS。

解决方案2：修改CSS（无需改动HTML） #

如果不想修改HTML，可以调整表格的边框属性：

更新后的完整CSS

.tg {
  border-collapse: separate; /* 替换原有的border-collapse: collapse */
  border-spacing: 0;
  border-radius: 12px; /* 圆角大小 */
  overflow: hidden;
}

.tg td, .tg th {
  border-color: black;
  border-style: solid;
  border-width: 3px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
  /* 去掉右侧和底部边框，避免相邻单元格边框重叠 */
  border-right-width: 0;
  border-bottom-width: 0;
}

/* 给最后一列单元格恢复右侧边框 */
.tg td:last-child, .tg th:last-child {
  border-right-width: 3px;
}

/* 给最后一行单元格恢复底部边框 */
.tg tbody tr:last-child td {
  border-bottom-width: 3px;
}

/* 原有单元格样式保持不变 */
.tg .tg-5091 {
  background-color: #ffffff;
  border-color: #93d22c;
  color: #07215c;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
  text-align: center;
  vertical-align: top
}

.tg .tg-2kj1 {
  background-color: #ffffff;
  border-color: #93d22c;
  color: #07215c;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
  text-align: left;
  vertical-align: top
}

该方案通过将 border-collapse 改为 separate，并调整单元格边框方向避免重叠，同时让表格的 border-radius 生效。

注意事项 #

• 可根据需求调整 border-radius 的数值（如 8px、16px）。
• 两种方案都不需要替换现有表格，只需添加少量代码即可适配多处复用的场景。

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