Bootstrap表格太宽如何友好显示


我的表格有十几列,我现在把它放在一个div里面,div设置了 overflow:auto
所以表格下面会有滚动条,拖拽查看一页显示不完的字段。

本来这样还能接受,但是自适应的表格还是自动挤压了每一列的宽度,我给每一列设置了col-sm-1也没用。
以至于显示成为这个样子:
请输入图片描述
我现在有两个问题:
1.如何使上图的每一列自然展开,不设置固定宽度?
2.特别大的表格还有什么比较理想的显示方式?

HTML bootstrap

酴釄。 10 years, 2 months ago

应该简化设计,不要过分牵强。

很多时候用户不需要知道这么多的内容。

将必要的信息呈现出来。具体信息可以让用户点击详细页面进去看或者使用悬浮对话框来查看。

表格也不是万能的,可以使用List+View的方式显示列表。这样会更好看的。

Razer菊 answered 10 years, 2 months ago

可以使用响应式表格,看看是不是你要的样子。给父元素添加 .table-responsive 类,这样宽度不会变,但是会出现横向滚动条。

参考 http://v3.bootcss.com/css/#tables 里面的响应式表格。

Rasho answered 10 years, 2 months ago

一般都是出横向滚动条的;

table 的的宽度最多是100%;所以如果如果想要内容自然展开,那就得给 table 的父元素设置比较大的 width

633091 answered 10 years, 2 months ago

  • 横向滚动
  • 设计表格展示方式
  • 屏幕尺寸不足的情况下隐藏某些列

这里我具体说一下设计表格。

日期字段没必要显示完整的,精确到分钟即可,如果是当年的时间,年份也可以不显示


 //长版
2014-11-20 12:43:23
//简版
11-20 12:34

“下发兑换码次数“,”同步订单结束“,”同步发货状态“,这几个字段占用空间很小,但是字段名很长。可以缩短字段名,或者将这几个字段放在一个table cell里,鼠标掠过时以popup的形式展现。

请输入图片描述

点击展开后
请输入图片描述

不一定做成表格,可以参考其它形式,如列表式,或者卡片式

请输入图片描述

IdKenji answered 10 years, 2 months ago

Your Answer