Question

我知道隐藏边界是一个常见的（也是基本的）问题，但这是（某种）独特的情况；尝试在仍然使用rowpans和colspans的同时使边框“ Want No BORDER THIS CELL”上方的边框消失（在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>

Answer 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>

使用rowspan和colspan使边框不可见

1 个答案: