使用 rowspan 和 colspan 使边框不可见答案

【问题标题】：Make border invisible with rowspan and colspan使用 rowspan 和 colspan 使边框不可见
【发布时间】：2018-10-30 08:02:49
【问题描述】：

我知道隐藏边框是一个常见的（也是基本的）问题，但这是一个（有些）独特的情况；尝试让单元格上方的边框消失（在 Chrome 中），同时仍然使用行跨度和跨度...

<html>
<head>
    <style type="text/css">
        td {
            border-style: solid;
        }
    </style>
</head>
<body>
    <table style="border-collapse: collapse;">
        <tr>
            <td rowspan="2">1</td>
            <td colspan="2" style="border-bottom-style:hidden; border-bottom-width:0px; border-bottom-color:white; border-bottom: 0;">2</td>
        </tr>
        <tr>
            <td>3</td>
            <td style="border-top-style:hidden; border-top-width:0px; border-top-color:white; border-top:0;">WANT NO BORDER ABOVE THIS CELL</td>
        </tr>
    </table>
</body>
</html>

【问题讨论】：

我认为您将不得不在其中嵌套一个 div 或探索box-shadow: inset... 看起来无论您做什么，您都会在那一秒内被第一项的边框卡住<tr> 标签占据整行。（无论您在单元格 3 中设置什么，都会占据整行。）
如前所述，当边框设置为折叠时，这似乎是 Chrome 中的一个错误。可能的解决方案是更改为<table style="border-spacing: 0">
@Ason 这对我不起作用。
@keramat -- 什么不起作用？ ...请注意，您将删除 border-collapse: collapse; 并改用 border-spacing: 0。这样边框将在 Chrome/new Edge 中消失

标签： html css google-chrome

【解决方案1】：

这似乎是 Google Chrome 中的一个错误，但这里有一个使用伪元素来获得所需视觉效果的想法：

td {
  border-style: solid;
}
.hide-border {
 position:relative;
}
.hide-border:before {
  content:"";
  position:absolute;
  top:-3px;
  height:3px;
  left:0;
  right:0;
  background:#fff;
}

<table style="border-collapse: collapse;">
  <tr>
    <td rowspan="2">1</td>
    <td colspan="2">2</td>
  </tr>
  <tr>
    <td>3</td>
    <td class="hide-border">WANT NO BORDER ABOVE THIS CELL</td>
  </tr>
</table>

【讨论】：

由于此错误仅在边框折叠时出现，因此可以简单地将<table style="border-collapse: collapse;"> 与<table style="border-spacing: 0"> 交换...并随时将其添加到您的答案中:)