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

2019-01-05 19:52:04 +08:00
 ttentau1

遇到的问题是:

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

另外一个方案是动态缩小字体,要复杂一些,可以查查 fluid typography 关键字。
ttentau1
2019-01-05 23:35:22 +08:00
感谢大家回复,目前已经找到解决方法了,引入 bootstrap-table 这个库就行了
rrfeng
2019-01-06 00:02:00 +08:00
看到楼主的解决方案为什么有种好笑的感觉。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/524225

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX