Question

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

为此，如果我可以在台式机/笔记本电脑上但在移动设备上应用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中，您可以使用断点特定的类（例如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>

HTML表格将在台式机中压缩，但在移动设备中会响应

1 个答案: