移动浏览器类型上的td周围不需要的边框

问题描述 投票:3回答:3

我有这个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周围的这些行。与Floated 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

html css mobile
3个回答
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>

0
投票

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

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

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

border-style: hidden;

0
投票

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

我正在使用12%黑色1px边框,这解决了它:

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

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

© www.soinside.com 2019 - 2024. All rights reserved.