当 td 为 position:relative 时，表格边框未正确呈现

Posted 2023-03-06

【中文标题】当 td 为 position:relative 时，表格边框未正确呈现

【英文标题】：Table borders not properly rendered when td is position:relative

【发布时间】：2017-04-19 11:03:15

【问题描述】：

当满足以下条件时，表格边框并不总是正确呈现：

表格包含在一个带有overflow-y:scroll的div中 边框折叠在桌子上 元素的样式为position:relative

据我所知，这仅在 Chrome 上发生（Mac OS 10.11.6 上的版本 54.0.2840.98）。我已经在 Safari 和 Firefox 上进行了测试，没有任何问题。

我在 JSFiddle (https://jsfiddle.net/5a0a4sL1/24/) 中管理了一个最小案例。代码如下所示：

.scroll 
  background-color:white;
  overflow-y: scroll; 
  width: 300px; 
  height: 200px;

.wrapper 
  height: auto; 
  width: 280px; 
  padding: 10px; 
  margin: 0px;

table 
  width:90%; 
  margin:0px 5%; 
  border-collapse:collapse;

td 
  position:relative;
  border:1px solid black;

<div class="scroll">
  <div class="wrapper">
    <table>
      <tbody>
        <tr><td style="height:39px;"></td></tr>
        <tr><td style="height:75px;"></td></tr>
        <tr><td style="height:111px;"></td></tr>
        <tr><td style="height:39px;"></td></tr>
      </tbody>
    </table>
  </div>
</div>

出现问题时页面如下所示：

此处表格底部一行和一位的边框无法呈现，但表格内容会显示是否有。问题的存在和严重程度取决于 Chrome 窗口的大小，这让我认为这是浏览器中的错误。

我的问题是这样的： 代码中是否有任何看起来我显然在滥用浏览器的内容？任何可以完成相同任务的调整（位置：relative 是调整大小手柄的放置所必需的）而不会让 Chrome 生气？或者这只是一个明显的浏览器错误？

编辑：我相信这不是here, for example 讨论的“表格边框随着位置：相对而消失”问题。表格单元格的边框通常会部分呈现，如果（例如）移除 y 方向的滚动，问题就会消失。

【参考方案1】：

我复制了这个问题。每个浏览器的渲染都不同。可能是浏览器错误。

让它在所有浏览器中完美运行的简单解决方法是在每个td 中添加<div> 并使用position: relative 设置它们的样式。如果您希望div 与td 具有相同的高度，那么也给它们height: 100%。

这是demo。

题外话（与问题原因相关）：

当你给一个宽度为 300px 的元素提供 10px 的内边距时，实际宽度变为 320px。如果你给它border 1px，实际宽度将是322px（border left 1px，border right 1px）。要获得实际的 300 像素，内边距为 10 像素，边框为 1 像素，请为元素提供此属性：box-sizing: border-box;。同样的概念也适用于“身高”。

例如，当您给元素高度 39px 和边框 1px 时，实际高度为 41px（1px 上边框 + 1px 下边框）。如果将box-sizing: border-box 添加到td，则高度将为39px。

【讨论】：

谢谢！奇怪的是，我现在无法自己复制问题（Chrome 已将自身更新为 55.0.2883.75），但我会按照您的建议更新高度和宽度。

@JasonCooper 很可能是 Chrome 中的错误