这是一个创建于 1786 天前的主题，其中的信息可能已经有所发展或是发生改变。
demo 地址： https://jpcmo.csb.app/ ， 开发者工具里看的最外层 div 和 table 是一样宽度，但是 div 会出现滚动？有前端大哥说下为什么吗？
 | 1 zhao7399686 2020-12-03 16:33:55 +08:00 div 的 overflow: auto 去掉就可以 |
 | 2 wangshaosen OP @zhao7399686 我需要 div 保持 overflow，问题是为什么第一行的 td 不设置 border，第二行的 td 设置 border，就会出现滚动条，而且有滚动条的时候 div 和 table 在 devtools 里是一样宽的。 |
 | 3 SmallTeddy 2020-12-03 16:45:30 +08:00 border-collapse: separate; |
 | 4 flowfire 2020-12-03 16:46:05 +08:00 猜测是高分屏的缩放引发的问题。 我在 mac 自带的 Retina 屏幕上会产生滚动条。但是在外界的 1080p 。1:1 的缩放比下不会产生。 |
 | 5 sixway 2020-12-03 16:46:56 +08:00 你的 table 设置了一个 border-collapse: collapse; 但是你只给一个单元格设置了 border: 1px solid red; mdn 里面这样写着 > When cells are collapsed, the border-style value of inset behaves like groove, and outset behaves like ridge. |
| 6 wangshaosen OP @flowfire 我是 windows 系统和 chrome 87.0.4280.88 版本，外接 1080p, 1:1 有这个问题，应该不是高分屏的问题。 |
 | 7 Biwood 2020-12-03 16:59:33 +08:00 一个 td 默认宽度撑满 table，加上两个 border 的宽度，导致 table 总宽度为 100% + 2px，显然超出了父元素的宽度，所以会有滚动。 table 的盒子模型跟 div 元素不一样，这算是一个坑。解决办法，table 的宽度设置为 width: calc(100% - 2px) 。 |
 | 8 Quarter 2020-12-03 18:30:28 +08:00 border-collapse: collapse; 单元格共享边框的问题，用 separate 好像就不会这样了，在 collapse 中的 border 不是向内挤压的，而是向外扩张的，所以宽度变大了，就超过 100%了 |
| 9 Quarter 2020-12-03 18:34:30 +08:00 似乎只在有的单元格没边框，有的单元格有边框的情况下出现，给第一行的 td 添加 border: 1px solid transparent; 好像就不会出现溢出的情况了 |
 | 10 lithbitren 2020-12-03 18:54:14 +08:00 咋整这么复杂呢，不就是 td 的 border 有 1px 的宽度所以产生了滚动条了吗 |
 | 11 CallMeSoul 2020-12-04 14:40:33 +08:00 我基本不用 table 了，都自己用 div 模拟 table 的，好控制 |
Select Language