html - 使用响应表 bootstrap3 保持列宽

Question

我有一个包含 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 是否有一个特殊的类来执行类似于表响应的操作？

Answer 1

.table-responsive 应该是你所拥有的，在 table 周围的 wrapper 上。不会保留宽度，因为该类在 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">