HTML 表格将在桌面中压缩，但在移动设备中响应答案

【问题标题】：HTML Table to be condensed in Desktop but Responsive in Mobile DevicesHTML 表格将在桌面中压缩，但在移动设备中响应
【发布时间】：2020-01-19 08:12:53
【问题描述】：

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

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

有效地，

在桌面上：

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

在移动端

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

【问题讨论】：

标签： html bootstrap-4 responsive

【解决方案1】：

在 Bootstrap 4 中，您可以使用断点特定的类，例如 table-responsive-sm，仅在移动设备上应用它的样式。对于桌面，您可以在 CSS 中为您的类 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>

【讨论】：