如何创建行无边框的HTML表格发票？CSS边框问题求助

嘿，这个问题我碰到过！你给<tr>设置边框没效果的核心原因是：HTML表格的边框默认是作用在<th>和<td>元素上的，<tr>本身并不直接渲染边框——你看到的“行边框”其实是每个单元格（td/th）的边框拼起来的。所以修改tr的border样式完全不会影响显示效果，得从单元格入手调整。

下面给你两种适合发票场景的解决方案：

场景1：仅保留表格外边框，所有内部单元格无边框 #

这种方案适合发票明细行完全无框的需求，只保留整个发票表格的外轮廓：

修改后的CSS代码：

thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
/* 合并表格边框，只给表格整体加外边框 */
table {
  border-collapse: collapse;
  border: 1px solid black;
}
/* 表头单元格可以保留边框（如果不需要也可以设为0） */
th {
  border: 1px solid black;
}
/* 明细行和汇总行的单元格去掉边框 */
tbody td, tfoot td {
  border: 0;
}

完整的HTML代码示例：

<!DOCTYPE html>
<html>
<head>
<style>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table {
  border-collapse: collapse;
  border: 1px solid black;
}
th {
  border: 1px solid black;
}
tbody td, tfoot td {
  border: 0;
}
</style>
</head>
<body>

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

</body>
</html>

场景2：表头和汇总行保留边框，明细行无边框 #

如果需要表头和底部汇总区域有边框，中间的发票明细行完全无框，可以调整CSS：

thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table {
  border-collapse: collapse;
  border: 1px solid black;
}
/* 表头和汇总单元格保留边框 */
th, tfoot td {
  border: 1px solid black;
}
/* 明细行单元格去掉边框 */
tbody td {
  border: 0;
}

额外优化：给明细行加分隔线（可选） #

如果想让发票明细行之间有淡淡的分隔线（不是边框），可以给tbody的tr加底部虚线，这样既清晰又不会有生硬的边框：

tbody tr {
  border-bottom: 1px dotted #ccc; /* 浅灰色虚线分隔明细行 */
}

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