引导程序：设置小型设备的表列宽度

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

任何帮助表示赞赏。

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