如何移除表格首单元格并调整边框以匹配预期样式

要实现的效果是：移除表格左上角的首单元格，但表格边框要覆盖原首单元格的底部和右侧区域，保持整体边框的完整性。用visibility:hidden隐藏单元格后，原位置的边框会断开，达不到预期效果，你可以试试下面的修改方案：

修改后的CSS代码 #

table, th, td {
  border: 0.5px solid black;
  border-collapse: collapse;
}

.removeCell {
  /* 隐藏单元格内容 */
  font-size: 0;
  text-indent: -9999px;
  /* 收缩单元格到最小宽度 */
  width: 0;
  padding: 0;
  /* 保留需要的边框，确保和其他边框衔接 */
  border: none;
  border-right: 0.5px solid black;
  border-bottom: 0.5px solid black;
}

对应的HTML代码（无需修改） #

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <link rel="stylesheet" href="css\desktopStyle.scss">
  </head>
  <body>
    <table>
      <tr>
        <th class="removeCell">Mois</th>
        <th>Data</th>
      </tr>
      <tr>
        <td>Janvier</td>
        <td>10.01.2014</td>
      </tr>
      <tr>
        <td>Février</td>
        <td>10.01.2014</td>
      </tr>
    </table>
  </body>
</html>

原理说明 #

• 用font-size:0和text-indent:-9999px彻底隐藏单元格内的文字内容，同时不会像visibility:hidden那样保留单元格的占位空间。
• 设置width:0和padding:0让单元格收缩到最小，避免占据多余空间。
• 手动保留border-right和border-bottom，让这两条边框和下方单元格的上边框、右侧表头的左边框合并，形成完整的表格边框，完美匹配预期样式。

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