V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Corbusier
V2EX  ›  前端开发

请教一个元素内部自定义滚动条的问题

  •  1
     
  •   Corbusier · 2018-09-01 12:19:15 +08:00 · 1669 次点击
    这是一个创建于 2265 天前的主题,其中的信息可能已经有所发展或是发生改变。

    描述

    当缩放浏览器宽度小于指定宽度时,table 内出现如图中的横向滚动条,大于该宽度时,table 内的横向滚动条消失

    多谢啦!

    12 条回复    2018-09-01 13:29:27 +08:00
    dixeran
        1
    dixeran  
       2018-09-01 12:24:03 +08:00 via Android
    overflow:auto;?
    Corbusier
        2
    Corbusier  
    OP
       2018-09-01 12:27:50 +08:00
    @dixeran 不大对啊,老哥,这样做不到自适应浏览器宽度
    InternetExplorer
        3
    InternetExplorer  
       2018-09-01 12:32:16 +08:00
    你这问题真的是。。。。
    InternetExplorer
        4
    InternetExplorer  
       2018-09-01 12:32:52 +08:00
    你要问怎么让表格的宽度自适应浏览器,width: 100% 或者 width: 100vw
    xxx749
        5
    xxx749  
       2018-09-01 12:33:37 +08:00 via Android
    @media screen and (max-width < val){
    tag{overflow-x: scroll}
    }
    @media screen and (max-width > val){
    tag{overflow-x: hidden}
    }
    ochatokori
        6
    ochatokori  
       2018-09-01 12:43:34 +08:00 via Android
    min-width:指定宽度;
    width:100%;
    rabbbit
        7
    rabbbit  
       2018-09-01 12:46:38 +08:00   ❤️ 1
    xxx749
        8
    xxx749  
       2018-09-01 12:48:33 +08:00 via Android
    @xxx749 max-width > val → min-width > val
    Corbusier
        9
    Corbusier  
    OP
       2018-09-01 13:05:59 +08:00
    @rabbbit 我写了一个跟您一样的 demo,为什么是横向滚动条一直存在...

    ```html

    ```
    Corbusier
        10
    Corbusier  
    OP
       2018-09-01 13:07:54 +08:00
    @rabbbit 我写了一个跟您一样的 demo,为什么是横向滚动条一直存在...

    ```html

    <div>
    <table>
    <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    </tr>
    <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    </tr>
    </table>
    </div>
    ```

    ```css
    table,td,th{
    border: 1px solid black;
    border-collapse: collapse;
    }
    table{
    width:100%;
    }

    td,th{
    min-width:1000px;
    }
    div{
    overflow-x: auto;
    }

    ```
    rabbbit
        11
    rabbbit  
       2018-09-01 13:10:47 +08:00
    min-width:1000px;
    单元格宽度 1000px,超出屏幕宽度了
    Corbusier
        12
    Corbusier  
    OP
       2018-09-01 13:29:27 +08:00
    @rabbbit 我懂您的意思了,就是当缩放到单元格低于 100px 时候,会出现横向滚动条,那单元格并不是均分的情况下呢?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5780 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 06:33 · PVG 14:33 · LAX 22:33 · JFK 01:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.