这是一个创建于 1480 天前的主题，其中的信息可能已经有所发展或是发生改变。
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