正如标题所说，使用 overflow: hidden 时，我的表格边框在我的表格上被切断了。例如，请参阅下面的代码。
<style>
table {
border-collapse: collapse;
}
table {
border: 1px solid black;
overflow: hidden;
}
</style>
<body>
<table>
<thead>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
</tr>
</thead>
<tbody>
<tr>
<th>side header</th>
<td>data 1</td>
<td>data 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>footer header</th>
<td>footer 2</td>
<td>footer 3</td>
</tr>
</tfoot>
</table>
</body>
</html>
我已将示例简化到最低限度。我可能会丢失可以纠正此问题的边框折叠样式，但我需要那种样式。没有它，我的代码会变得很乱。
作为一个临时解决方案，我发现我可以使用下面的 css 破解它，但我不是黑客的狂热粉丝!
.borderhack:after {
content: '\00a0';
position: absolute;
border: 1px solid black;
left: -2px;
top: -2px;
width: 100%;
height: 100%;
z-index: -10;
}
table {
position: relative;
}
如果对此有任何解释或更好的解决方案，我将不胜感激。经过一天的调查，我真的很想知道为什么它实际上这样做。
谢谢
最佳答案
有两个快速解决方案:
- 使用 2px 边框宽度。
- 使用轮廓代替边框。
例如:
table {
border-collapse: collapse;
border: 2px solid black;
overflow: hidden;
}
或
table {
border-collapse: collapse;
outline: 1px solid black;
overflow: hidden;
}
我认为，发生这种情况的原因是，当使用表格边框的折叠边框模型时，浏览器试图在中心拆分边框。在一个一像素的外边框上显然这是不可能的，因此浏览器在顶部/左侧使用全像素宽度，而在底部/右侧则不使用任何宽度。这种行为可能在标准中的某个地方，我没看那么远。但是在里面这将正确地填充边界而不加倍宽度，它只是外部和溢出的组合:隐藏这大概是裁剪底部和右侧，浏览器生成但技术上向右微移半像素因此在元素的区域“之外”。我希望这是有道理的。轮廓未被溢出裁剪 - 我不确定为什么，我不会预料到异常。
http://www.w3.org/TR/CSS21/tables.html#collapsing-borders
另一种解决方案可能是将溢出应用到 td 和 th 而不是表，或者检查是否真的需要设置溢出。
关于html - 溢出 : hidden on table causes bottom and right border to dissappear，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17119594/