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

Question

我使用Bootstrap 4创建一个如下所示的表。Bootstrap具有内置类"table-sm"，该类可将填充（或其他内容）最小化，以使表更适合在小屏幕上显示。

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

有人可以告诉我r 复制"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;
    }
}
非常感谢，迈克

我使用Bootstrap 4创建一个如下所示的表。 Bootstrap具有一个内置的“ table-sm”类，该类最大程度地减少了填充（可能还有其他事情），以使表更适合在小屏幕上显示。 ...

Answer 1

您可以使用引导程序内置类“表响应”，这样，

Answer 2

Bootstrap不为小型视口提供table-sm的任何变体。您需要使用引导程序（CSS）媒体查询来定位此目标]

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