边缘表格中的溢出滚动条无法正确显示
Posted
技术标签:
【中文标题】边缘表格中的溢出滚动条无法正确显示【英文标题】：Overflow scrollbars in tables in edge dont display correctly 【发布时间】：2020-01-14 17:51:18 【问题描述】：我在任何地方都找不到这个，所以我们开始吧。最大宽度和溢出设置为自动获取滚动条的表格，就像人们期望的那样。这在 Chrome 中效果很好，但 Edge（和 IE）似乎对这些滚动条有问题
这些图片可能有助于理解我面临的问题：
Chrome：（我想要它）
chrome
边缘：（坏）
edge
（还不能发图，需要10声望）
<html>
<style>
table
border-collapse: collapse;
td
overflow: auto;
max-width: 100px;
border: 1px solid black;
padding: 10px;
</style>
<body>
<table>
<tr>
<td>test</td>
<td>test</td>
<td>tset</td>
<td>tset test test testsetsetstsetsetsetststsetststsetst</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</table>
</body>
</html>
<html>
<style>
table
border-collapse: collapse;
td
overflow: auto;
max-width: 100px;
border: 1px solid black;
padding: 10px;
</style>
<body>
<table>
<tr>
<td>test</td>
<td>test</td>
<td>tset</td>
<td>tset test test testsetsetstsetsetsetststsetststsetst</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</table>
</body>
</html>【问题讨论】：
【参考方案1】：尝试使用：
border-collapse: separate;
border-spacing: 0px;
<html>
<style>
table
border-collapse: separate;
border-spacing: 0px;
td
overflow: auto;
max-width: 100px;
border: 1px solid black;
padding: 10px;
</style>
<body>
<table>
<tr>
<td>test</td>
<td>test</td>
<td>tset</td>
<td>tset test test testsetsetstsetsetsetststsetststsetst</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</table>
</body>
</html>【讨论】：
以上是关于边缘表格中的溢出滚动条无法正确显示的主要内容，如果未能解决你的问题，请参考以下文章
如何添加水平滚动条以访问 Material-UI 表中的溢出列
C# FORM 如何使DATAGRIDVIEW始终显示纵向滚动条啊?