HTML Table 在桌面设备中压缩但在移动设备中响应

Question

我的要求是 HTML Table 在桌面上压缩，但在移动设备上倾斜。

为此，如果我可以在 desktop/laptop 上应用 Bootstrap 样式 table table-condensed，但在移动设备上它应该只有 table table-responsive 样式。我需要将其应用于整个 Web 应用程序或 Web 应用程序中的特定页面；以可行者为准。

有效，

在桌面上：

<table class='table table-condensed'></table>

在手机上

<table class='table table-responsive></table>

Answer 1

在 Bootstrap 4 中，您可以使用特定于断点的 classes，例如 table-responsive-sm 仅在移动设备上应用它的样式。对于桌面，您可以在 CSS.

中为 class table-condensed（不属于 Bootstrap）创建一个媒体查询

https://jsfiddle.net/thzrq5a0/

@media (max-width: 575.98px) {
  .table-responsive-sm {
      background: red;
  }
}

@media (min-width: 576px) {
  .table-condensed {
    background: green;
  }
}

<div class="table-responsive-sm table-condensed">
  <table class="table">
    <caption>List of users</caption>
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

HTML Table 在桌面设备中压缩但在移动设备中响应

HTML Table to be condensed in Desktop but Responsive in Mobile Devices

html

bootstrap-4

responsive