单元格边框扩大总表的宽度答案

【问题标题】：Cell border expanding total table's width单元格边框扩大总表的宽度
【发布时间】：2018-04-02 23:40:55
【问题描述】：

我需要一个跨越父容器全宽的表格。表格的标题单元格不能有任何边框，而数据单元格应该。单元格边框应在所有 4 个边上统一为 1px 宽，这意味着边框需要折叠。当我在 CSS 中为我的表格设置样式时，我注意到表格的总宽度为 100% + 1px。谁能帮助我并告诉我我做错了什么？

* {
  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;
}

<div>

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

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

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

【问题讨论】：

that the total table width is 100% + 1px --> 怎么样？这对我来说是 100%
@TemaniAfif 请尝试在 Chrome 中编辑的 JSFiffle 链接
table 和 div 是相同的 200px 并且在从开发人员工具检查后，从 jsfiddle 对我来说表格宽度看起来是 100%
@NagaSaiA 我同意，但是为什么会溢出那 1px 呢？
移除overflow-x:auto，我在Chrome,FF,Edge中看到相同的输出：jsfiddle.net/dgrogan/fbwyx66o/54（两个边框都可见，我认为这是你想要的）否则，所有3个浏览器都是不同的:jsfiddle.net/dgrogan/fbwyx66o/53（Edge 切断右边框，FF 切断左边框，Chrome 添加滚动条让您可以看到两者）

标签： html css

【解决方案1】：

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

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

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

【讨论】：

这是我尝试的第一件事。不幸的是，当边框透明时，border-right 被渲染为 0.5px。透明边框修复了溢出，但它仍然看起来很奇怪，缺少 0.5px 边框。我不能为边框使用静态颜色，因为背景颜色不是。
我在标题中看不到右侧的 0.5px 边框（尝试使用 Chrome 65 和 FF 59）。上下边框使用透明色解决了背景颜色不同的问题，只需要定义与单元格边框颜色相同的边框底色即可。

【解决方案2】：

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

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

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

这似乎是 Chrome 的错误，因为在其他浏览器中看起来不错

【讨论】：