如何为表格行内所有单元格添加外边框？附示例参考

结合你当前的表格样式（已设置border-collapse: separate和行间距border-spacing: 0 30px），可以通过以下两种方式实现每行单元格带统一外边框的效果：

方法一：用outline快速实现整行边框 #

直接给<tr>元素添加outline属性，就能给整行单元格套上统一的外边框，操作最简单：

body {
  background: red;
}

table {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 30px;
}

td {
  padding: 15px 6px;
  background: #fff;
}

/* 新增行边框样式 */
tr {
  outline: 2px solid green;
}

方法二：给单元格设置边框并处理重叠 #

如果需要更精细的边框控制，可以给每个单元格单独加边框，再调整同一行单元格的边框重叠问题：

body {
  background: red;
}

table {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 30px;
}

td {
  padding: 15px 6px;
  background: #fff;
  border: 2px solid green;
}

/* 去掉同一行单元格之间的重复边框 */
tr td:first-child {
  border-right: none;
}
tr td:last-child {
  border-left: none;
}

HTML结构（已将内容翻译为中文）：

<table>
  <tr>
    <td>第一行数据</td>
    <td>第一行数据</td>
  </tr>
  <tr>
    <td>第二行数据</td>
    <td>第二行数据</td>
  </tr>
</table>

最终效果参考：

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