单元格边框扩展总表格的宽度

Question

我需要一个跨越父容器的整个宽度的表。 表格的标题单元格在数据单元格应该没有任何边框。 单元格边框应在所有4个边上均匀地宽1px，这意味着边框需要折叠。当我在CSS中像这样设置样式时，我发现总表格宽度是100％+ 1px。 谁能帮助我，告诉我我做错了什么？

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}

div {
  width: 200px;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td,
th {
  border: 1px solid #d3e0ee;
  padding: 5px;
}

th {
  border: 0px solid white;
  padding: 6px;
}

＆＃13;

<div>

  <table>
    <tr>
      <th>Col 1</th>
      <th>Col2</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;

还可以在https://jsfiddle.net/fbwyx66o/4/进行演示（在Chrome中试用）

编辑1： 当边框设置为透明（即border: 1px solid transparent;）时，溢出问题消失，但浏览器仍然只渲染右侧边框的一半。请比较下面屏幕截图中的th和td右边框：

Answer 1

当渲染计算表格大小时，它似乎是一个Chrome错误，它适用于Firefox。而不是删除边框，使其透明或使用与背景相同的颜色。

  th {
    border-color: rgba(0, 0, 0, 0);
    border-bottom-color: #d3e0ee;
    padding: 6px;
  }

我尝试了上面的风格，它在Chrome中运行良好。

Answer 2

使用border-collpase实现预期结果：在div的边框下方使用折叠

  div {
    width: 200px;
    overflow-x: auto;
    border:1px solid white;
  }

代码示例 - https://jsfiddle.net/Nagasai_Aytha/fbwyx66o/41/

它似乎是Chrome错误，因为在其他浏览器中它看起来很好

查看此内容以获取更多详情 - Table width 100% is off by a single pixel (depending on actual width)