使用响应式表 bootstrap3 保持列宽答案

【问题标题】：keep column width using responsive table bootstrap3使用响应式表 bootstrap3 保持列宽
【发布时间】：2017-08-26 16:02:09
【问题描述】：

我有一个有 7 列 (td) 的表。我正在设置一个固定的宽度，并且使用桌面上的浏览器可以完美地工作。但是，当我调整浏览器大小以模拟手机甚至通过移动设备访问此页面时，它不会尊重列宽。

我不会放整个html，但基本上是：

<div class="table-responsive">
    <table>
         <tr>
              <td class="w-large">Column 1</td>
              <td class="w-medium">Column 2</td>
              <td class="w-medium">Column 3</td>
              <td class="w-medium">Column 4</td>
              <td class="w-medium">Column 5</td>
              <td class="w-medium">Column 6</td>
              <td class="w-medium">Column 7</td>
         </tr>
    </table>
</div>

CSS：

.w-large {
    width: 198px;
}

.w-medium {
    width: 176px;
}

有没有办法在移动设备上保持列宽？ bootstrap 是否有一个类似于 table-responsive 的特殊类来执行此操作？

【问题讨论】：

如果你有固定的列，你真的需要一个表格响应吗？？
在使用网格系统时为什么要使用表格？
为什么table-responsive类不在你的桌子上，而是在你的父div上？
嗯，我之前尝试过网格系统，但我的客户不喜欢它。所以我切换到表格响应，其中包括一个滚动。为了我们的需要，它更好。但我想保持列宽，因为我有一个滚动条。
@TheLittlePig -- .table-responsive 应该包裹桌子，而不是放在桌子上。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

.table-responsive 应该是你所拥有的，在桌子周围的包装上。不会保留宽度，因为该类在 th、td 等上放置了 white-space: nowrap;。改为：

@media screen and (max-width: 767px) {
  .alt-table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #dddddd;
    -webkit-overflow-scrolling: touch;
  }
}

HTML

<div class="alt-table-responsive">

【讨论】：

非常感谢，克里斯蒂娜！