有前端帮忙看下为什么这会出现滚动条吗？

[wangshaosen]

demo 地址： https://jpcmo.csb.app/ ， 开发者工具里看的最外层 div 和 table 是一样宽度，但是 div 会出现滚动？有前端大哥说下为什么吗？

[zhao7399686]

div 的 overflow: auto 去掉就可以

[wangshaosen]

@zhao7399686 我需要 div 保持 overflow，问题是为什么第一行的 td 不设置 border，第二行的 td 设置 border，就会出现滚动条，而且有滚动条的时候 div 和 table 在 devtools 里是一样宽的。

[SmallTeddy]

border-collapse: separate;

[flowfire]

猜测是高分屏的缩放引发的问题。
我在 mac 自带的 Retina 屏幕上会产生滚动条。但是在外界的 1080p 。1:1 的缩放比下不会产生。

[sixway]

你的 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.

[wangshaosen]

@flowfire 我是 windows 系统和 chrome 87.0.4280.88 版本，外接 1080p, 1:1 有这个问题，应该不是高分屏的问题。

[Biwood]

一个 td 默认宽度撑满 table，加上两个 border 的宽度，导致 table 总宽度为 100% + 2px，显然超出了父元素的宽度，所以会有滚动。
table 的盒子模型跟 div 元素不一样，这算是一个坑。解决办法，table 的宽度设置为 width: calc(100% - 2px) 。

[Quarter]

border-collapse: collapse;

单元格共享边框的问题，用 separate 好像就不会这样了，在 collapse 中的 border 不是向内挤压的，而是向外扩张的，所以宽度变大了，就超过 100%了

[Quarter]

似乎只在有的单元格没边框，有的单元格有边框的情况下出现，给第一行的 td 添加 border: 1px solid transparent; 好像就不会出现溢出的情况了

[lithbitren]

咋整这么复杂呢，不就是 td 的 border 有 1px 的宽度所以产生了滚动条了吗

[CallMeSoul]

我基本不用 table 了，都自己用 div 模拟 table 的，好控制