CSS：复制Bootstrap class table-sm，仅适用于手机屏幕

Question

我使用 Bootstrap 4 创建了一个 table 开始如下。 Bootstrap 有一个内置的 class "table-sm" 最小化填充（可能还有其他东西），使 tables 更适合小屏幕。

当我在下面的示例中应用这个 class 而不是 "table-custom" 时，它按预期工作，但我只想在移动（小）屏幕上应用它。因此，我创建了一个 class "table-custom" 并使用了下面的 CSS 但我无法让它工作。

有人能告诉我我还需要做些什么才能复制 "table-sm" class 并将其限制为仅限移动（小）屏幕吗？

我的HTML（开始）：

<div class="table-responsive">
    <table class="table table-custom table-hover">
        <thead>
            <tr>

我的CSS:

@media (max-width: 767px) {
    .table-custom>thead>tr>th, 
    .table-custom>thead>tr>td, 
    .table-custom>tbody>tr>th, 
    .table-custom>tbody>tr>td, 
    .table-custom>tfoot>tr>th, 
    .table-custom>tfoot>tr>td {
        padding: 5px;
    }
}

非常感谢，
麦克

Answer 1

您可以使用 bootstrap 内置 class "table-responsive", 像这样，

<div class="table-responsive">
    <table class="table">
      ...
    </table>
</div>

它将在移动屏幕上以可滚动的方式为您工作table。

Answer 2

Bootstrap 不为小视口提供 table-sm 的任何变体。您需要使用 bootstrap (CSS) 媒体查询

作为目标

@media (max-width: 767.98px) { 
 .table-custom th,
 .table-custom td {
     padding: .3em !important;
  }
}

CSS：复制Bootstrap class table-sm，仅适用于手机屏幕

CSS: Replicate Bootstrap class table-sm and apply to mobile screens only

css

media

html-table

twitter-bootstrap

bootstrap-4