Bootstrap表格太宽如何友好显示

Question

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

本来这样还能接受，但是自适应的表格还是自动挤压了每一列的宽度，我给每一列设置了col-sm-1也没用。
以至于显示成为这个样子:

我现在有两个问题：
1.如何使上图的每一列自然展开，不设置固定宽度？
2.特别大的表格还有什么比较理想的显示方式？

Answer 1

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

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

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

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

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

点击展开后

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

Answer 2

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

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

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

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

Answer 3

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

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

Answer 4

colgroup最好用
可以查看此文章

Answer 5

我的方法，每个th里加nobr轻松解决此类问题

Answer 6

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

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

Answer 7

1、table加一个样式： table-layout:fixed,设为固定的，然后你自己可以根据需要，针对没列定宽度，百分比和px均可
2、我的小方法：

我的内容

内容放在td的div里面。div的宽度自己可以设定，然后外部td可以根据内部div的宽度自适应鸟~~~
3、http://www.html-js.com/qa/The-bootstrap-form-to-a-fixed-width，看到这里还有个方法，但是试了下，貌似有点问题...回头我看看

Answer 8

http://download.csdn.net/deta...

Answer 9

最近遇到这个问题

解决方法：设置宽度超过100% 即可。

Answer 10

Goenitz回答的解决了我的问题，给父元素添加.table-responsive类。