CSS：复制 Bootstrap 类 table-sm 并仅适用于移动屏幕答案

【问题标题】：CSS: Replicate Bootstrap class table-sm and apply to mobile screens onlyCSS：复制 Bootstrap 类 table-sm 并仅适用于移动屏幕
【发布时间】：2020-02-10 15:39:03
【问题描述】：

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

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

谁能告诉我我还需要做什么来复制"table-sm" 类并将其仅限于移动（小）屏幕？

我的 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;
    }
}

非常感谢，
迈克

【问题讨论】：

标签： css twitter-bootstrap html-table bootstrap-4 media

【解决方案1】：

Bootstrap 不为小视口提供任何 table-sm 变体。您需要使用引导 (CSS) 媒体查询来定位它

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

【讨论】：

完美——正是我想要的。非常感谢！我刚刚注意到，我也可以使用 Chrome 中的 Inspector 找到这一点。
是的，开发工具在这些情况下会派上用场:)
另外一个初学者的问题：当我将 .table-custom 类添加到我的每个 th 和 td 元素时，我才让它工作（当我直接将它添加到表元素）。如果我将它应用于表格元素，我假设这将被 Bootstrap 覆盖，因为我在那里不使用其他 CSS 样式。有没有其他方法可以防止这种情况？只是好奇，只将它应用到桌子上会更方便。
试试table.table.table-custom th 而不是.table-custom th

【解决方案2】：

您可以使用引导程序内置类“table-responsive”，像这样，

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

它可以作为可滚动表格在移动屏幕上为您工作。

【讨论】：

我已经表明我在我的问题中应用了它，这不是我问题的答案？！