V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
wangshaosen
V2EX  ›  问与答

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

  •  
  •   wangshaosen · 2020-12-03 16:29:10 +08:00 · 1356 次点击
    这是一个创建于 1211 天前的主题,其中的信息可能已经有所发展或是发生改变。
    demo 地址: https://jpcmo.csb.app/ , 开发者工具里看的最外层 div 和 table 是一样宽度,但是 div 会出现滚动?有前端大哥说下为什么吗?
    11 条回复    2020-12-04 14:40:33 +08:00
    zhao7399686
        1
    zhao7399686  
       2020-12-03 16:33:55 +08:00
    div 的 overflow: auto 去掉就可以
    wangshaosen
        2
    wangshaosen  
    OP
       2020-12-03 16:41:19 +08:00
    @zhao7399686 我需要 div 保持 overflow,问题是为什么第一行的 td 不设置 border,第二行的 td 设置 border,就会出现滚动条,而且有滚动条的时候 div 和 table 在 devtools 里是一样宽的。
    SmallTeddy
        3
    SmallTeddy  
       2020-12-03 16:45:30 +08:00
    border-collapse: separate;
    flowfire
        4
    flowfire  
       2020-12-03 16:46:05 +08:00
    猜测是高分屏的缩放引发的问题。
    我在 mac 自带的 Retina 屏幕上会产生滚动条。但是在外界的 1080p 。1:1 的缩放比下不会产生。
    sixway
        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.
    wangshaosen
        6
    wangshaosen  
    OP
       2020-12-03 16:52:12 +08:00
    @flowfire 我是 windows 系统和 chrome 87.0.4280.88 版本,外接 1080p, 1:1 有这个问题,应该不是高分屏的问题。
    Biwood
        7
    Biwood  
       2020-12-03 16:59:33 +08:00
    一个 td 默认宽度撑满 table,加上两个 border 的宽度,导致 table 总宽度为 100% + 2px,显然超出了父元素的宽度,所以会有滚动。
    table 的盒子模型跟 div 元素不一样,这算是一个坑。解决办法,table 的宽度设置为 width: calc(100% - 2px) 。
    Quarter
        8
    Quarter  
       2020-12-03 18:30:28 +08:00
    border-collapse: collapse;

    单元格共享边框的问题,用 separate 好像就不会这样了,在 collapse 中的 border 不是向内挤压的,而是向外扩张的,所以宽度变大了,就超过 100%了
    Quarter
        9
    Quarter  
       2020-12-03 18:34:30 +08:00
    似乎只在有的单元格没边框,有的单元格有边框的情况下出现,给第一行的 td 添加 border: 1px solid transparent; 好像就不会出现溢出的情况了
    lithbitren
        10
    lithbitren  
       2020-12-03 18:54:14 +08:00
    咋整这么复杂呢,不就是 td 的 border 有 1px 的宽度所以产生了滚动条了吗
    CallMeSoul
        11
    CallMeSoul  
       2020-12-04 14:40:33 +08:00
    我基本不用 table 了,都自己用 div 模拟 table 的,好控制
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   987 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 22:07 · PVG 06:07 · LAX 15:07 · JFK 18:07
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.