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

纯前端,如何让表格在多种分辨率下,自适应宽度,表头不换行?

  •  
  •   ttentau1 · 2019-01-05 19:52:04 +08:00 · 3430 次点击
    这是一个创建于 2148 天前的主题,其中的信息可能已经有所发展或是发生改变。

    遇到的问题是:

    1. 表格在低分辨率(主要是 1280 和 1360 这两个)下,表头的内容会换行,会导致非常的整体看起来非常的难看。
    2. 表格行数过多,会导致所有行的宽度变窄。宽度变窄后,表头的内容也会换行。会导致非常的整体看起来非常的难看。 注:数据是 php 渲染,后端不提供接口。所以 ElementUI 这种、layui 这种用不了。前端唯一能做的就是写 css 调样式、js 操作 dom。 请问各位大佬有什么解决方法吗?
    5 条回复    2019-01-06 00:02:00 +08:00
    woscaizi
        1
    woscaizi  
       2019-01-05 19:57:27 +08:00
    字体大小通过设置 rem 缩放下。
    learnshare
        2
    learnshare  
       2019-01-05 19:59:29 +08:00
    设置每一列的最小宽度,列多了允许横向滚动
    old9
        3
    old9  
       2019-01-05 20:39:51 +08:00
    不换行就会导致整个表格横向超过页面范围,如果你要的就是这个效果,那表头 th{white-space: nowrap} 应该就可以了。

    另外一个方案是动态缩小字体,要复杂一些,可以查查 fluid typography 关键字。
    ttentau1
        4
    ttentau1  
    OP
       2019-01-05 23:35:22 +08:00
    感谢大家回复,目前已经找到解决方法了,引入 bootstrap-table 这个库就行了
    rrfeng
        5
    rrfeng  
       2019-01-06 00:02:00 +08:00
    看到楼主的解决方案为什么有种好笑的感觉。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2134 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 00:45 · PVG 08:45 · LAX 16:45 · JFK 19:45
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.