Bootstrap：为小型设备设置表格列宽答案

【问题标题】：Bootstrap: Set table column width for small devicesBootstrap：为小型设备设置表格列宽
【发布时间】：2014-04-08 11:00:36
【问题描述】：

如何为较小的设备设置表格的列宽？我正在使用boostrap3。

这是我的代码：

      <div class="table-responsive" style="overflow: auto; height:350px;">
        <table class="table table-striped table-hover">
          <thead>
            <tr>
              <th>Contact</th>
              <th>Message</th>
              <th class="hidden-xs hidden-sm">Time</th>
              <th></th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td class="tr-class">Contact Name</h4><i><small>Address</small></i></td>
              <td class="tr-class ltdmsgcls" >Sample test message. Its a message to test on smaller devices. Need to find out.</td>
              <td class="tr-class hidden-xs hidden-sm">timestamp</td>
              <td><button>&times;</button></td>
            </tr>
          </tbody>
        </table>

CSS：

  @media (max-width: 768px) {
      .ltdmsgcls {
          table-layout: fixed;
          word-wrap: normal|break-word|initial|inherit;
              width: 100px;
      }
  }

这样，我无法减小 Message 列的宽度。我看到较小设备的水平滚动条。如何设置消息列的宽度，使其可见并且列数据包装在较小的设备（不同大小）上。截至目前，较大的设备以适当的方式显示了这一点。

感谢任何帮助。

【问题讨论】：

标签： html angularjs twitter-bootstrap css angular-ui-bootstrap

【解决方案1】：

据我所知媒体查询，您的媒体查询应该是：

@media screen and (max-width: 768px) {
      .ltdmsgcls {
          table-layout: fixed;
          word-wrap: normal|break-word|initial|inherit;
              width: 100px;
      }
}

而不是你所拥有的。

【讨论】：

这仅适用于宽度等于 768px 且不小于 768px 的宽度。

【解决方案2】：

致遇到同样问题的人。这是我尝试和工作的方法。

    @media 
    only screen and (max-width: 767px),
    (min-device-width: 768px) and (max-device-width: 1024px)  {
        .table-responsive > .table > tbody > tr > td {
            white-space: inherit;
        }
     }

【讨论】：