Question

如何为较小的设备设置表格的列宽？我正在使用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列的宽度。我看到一个用于较小设备的水平滚动条。如何设置Message列的宽度以使其可见，并将列数据包装在较小的设备（不同大小）上。截至目前，较大的设备以适当的方式显示了这一点。

感谢任何帮助。

Answer 1

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

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

而不是你拥有的东西。

Answer 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;
        }
     }

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

2 个答案: