Question

我以这个HTML代码为例来说明我的问题。

table {
  border-collapse: collapse;
  border: 0px;
  border-spacing: 0;
  background-color: black;
  width: 300px;
  height: 300px;
  margin: auto;
}
td {
  border: none;
  background-color: white;
  padding: 0px
}

<table border='0' cellspacing='0' cellpadding='0'>
  <tr>
    <td>White</td>
    <td>White</td>
  </tr>
</table>

正如你可以看到父元素有黑色背景，子元素有白色，我无法在复制示例中删除td周围的这一行。与Floted div一样的东西。

仅适用于移动浏览器或Chrome移动开发者视图。请帮忙）

http://i.stack.imgur.com/bppBb.png

要查看Chrome上的边框您必须在切换到移动视图后刷新页面如果它在您的电脑上工作，为什么它不适用于我？这是完整的示例代码。我做错了什么？

我在Windows 10上。但是我的HTC显示同样的任何方式......

<!DOCTYPE html>
<html>
<body>



<table border='0' cellspacing='0' cellpadding='0' style="border-collapse:collapse;border:0px;border-spacing:0;background-color:black;width:300px;height:300px;margin:auto">
  <tr>
      <td style="border:none;background-color:white;padding:0px">White</td>
      <td style="border:none;background-color:white;padding:0px">White</td>
  </tr>
</table>


</body>

</html>

即使在CssZengarden网站上，此边框也可在移动设备上看到

http://i.stack.imgur.com/kVZgR.png

Answer 1

我可以重新创建问题，我建议使用css3显示表而不是使用实际表格。

.table-wrapper {
  display: table;
  width: 300px;
  height: 300px;
  background-color: black;
}
.cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  background-color: white;
}

<div class="table-wrapper">
  <div class="cell">TEXT HERE</div>
  <div class="cell">TEXT HERE</div>
</div>

Answer 2

尝试为border: 0 none !important;，table，tr和th设置td。我建议!important只是为了确保您的边界不会来自您可能包含的第三方的任何CSS。

如果失败，您仍然可以尝试应用border-color: transparent;或border-color: #your-background-color;或border-color: rgba(255,255,255,0);作为解决方法。

作为最后的手段，您也可以尝试设置

border-style: hidden;

Answer 3

遇到同样的问题，找到了解决方案。

我正在使用12％黑色1px边框，这解决了它：

>td[colspan] { border-top: 1px solid rgba(0,0,0,.06) !important; }

神秘地使用半能见度进行了双边界匹配。仅使用border-color或border-top-color + val也无法解决此问题。

移动浏览器类型

3 个答案: