Bootstrap 4：滚动表体答案

【问题标题】：Bootstrap 4: scroll table bodyBootstrap 4：滚动表体
【发布时间】：2019-04-20 18:34:00
【问题描述】：

我有一个巨大的表格，我试图使用 Bootstrap 4 以适合移动设备的方式显示。我的表格有可变数量的列（

一个固定的标题，每列与“它的”行具有相同的宽度
当宽度/高度超过容器大小时，x/y 上的可滚动正文
标题在 x 上随表格主体滚动
无论是在移动设备/大型桌面上，行都不会被包装
尽可能不要 JS

找不到解决办法，期待您的帮助。

Jsfiddle 示例here

表格html

  <table class="table table table-hover table-striped table-bordered table-sm">
    <thead>
      <tr>
         <th scope="col">Column 1</th>
         <th scope="col">Column 2</th>
         <th scope="col">Column 3</th>
         <th scope="col">Column 4</th>
         <th scope="col">Column 5</th>
         <th scope="col">Column 6</th>
         <th scope="col">Column 7</th>
         <th scope="col">Column 8</th>
         <th scope="col">Column 9</th>
         <th scope="col">Column 10</th>
         <th scope="col">Column 11</th>
         <th scope="col">Column 12</th>
         <th scope="col">Column 13</th>
         <th scope="col">Column 14</th>
         <th scope="col">Column 15</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td scope="col">R1C1</td>
         <td scope="col">R1C2</td>
         <td scope="col">R1C3</td>
         <td scope="col">R1C4</td>
         <td scope="col">R1C5</td>
         <td scope="col">R1C6</td>
         <td scope="col">R1C7</td>
         <td scope="col">R1C8</td>
         <td scope="col">R1C9</td>
         <td scope="col">R1C10</td>
         <td scope="col">R1C11</td>
         <td scope="col">R1C12</td>
         <td scope="col">R1C13</td>
         <td scope="col">R1C14</td>
         <td scope="col">R1C15</td>
      </tr>
      <tr>
         <td scope="col">R2C1</td>
         <td scope="col">R2C2</td>
         <td scope="col">R2C3</td>
         <td scope="col">R2C4</td>
         <td scope="col">R2C5</td>
         <td scope="col">R2C6</td>
         <td scope="col">R2C7</td>
         <td scope="col">R2C8</td>
         <td scope="col">R2C9</td>
         <td scope="col">R2C10</td>
         <td scope="col">R2C11</td>
         <td scope="col">R2C12</td>
         <td scope="col">R2C13</td>
         <td scope="col">R2C14</td>
         <td scope="col">R2C15</td>
      </tr>
      <tr>
         <td scope="col">R3C1</td>
         <td scope="col">R3C2</td>
         <td scope="col">R3C3</td>
         <td scope="col">R3C4</td>
         <td scope="col">R3C5</td>
         <td scope="col">R3C6</td>
         <td scope="col">R3C7</td>
         <td scope="col">R3C8</td>
         <td scope="col">R3C9</td>
         <td scope="col">R3C10</td>
         <td scope="col">R3C11</td>
         <td scope="col">R3C12</td>
         <td scope="col">R3C13</td>
         <td scope="col">R3C14</td>
         <td scope="col">R3C15</td>
      </tr>
      <tr>
         <td scope="col">R4C1</td>
         <td scope="col">R4C2</td>
         <td scope="col">R4C3</td>
         <td scope="col">R4C4</td>
         <td scope="col">R4C5</td>
         <td scope="col">R4C6</td>
         <td scope="col">R4C7</td>
         <td scope="col">R4C8</td>
         <td scope="col">R4C9</td>
         <td scope="col">R4C10</td>
         <td scope="col">R4C11</td>
         <td scope="col">R4C12</td>
         <td scope="col">R4C13</td>
         <td scope="col">R4C14</td>
         <td scope="col">R4C15</td>
      </tr>
      <tr>
         <td scope="col">R5C1</td>
         <td scope="col">R5C2</td>
         <td scope="col">R5C3</td>
         <td scope="col">R5C4</td>
         <td scope="col">R5C5</td>
         <td scope="col">R5C6</td>
         <td scope="col">R5C7</td>
         <td scope="col">R5C8</td>
         <td scope="col">R5C9</td>
         <td scope="col">R5C10</td>
         <td scope="col">R5C11</td>
         <td scope="col">R5C12</td>
         <td scope="col">R5C13</td>
         <td scope="col">R5C14</td>
         <td scope="col">R5C15</td>
      </tr>
      <tr>
         <td scope="col">R6C1</td>
         <td scope="col">R6C2</td>
         <td scope="col">R6C3</td>
         <td scope="col">R6C4</td>
         <td scope="col">R6C5</td>
         <td scope="col">R6C6</td>
         <td scope="col">R6C7</td>
         <td scope="col">R6C8</td>
         <td scope="col">R6C9</td>
         <td scope="col">R6C10</td>
         <td scope="col">R6C11</td>
         <td scope="col">R6C12</td>
         <td scope="col">R6C13</td>
         <td scope="col">R6C14</td>
         <td scope="col">R6C15</td>
      </tr>
      <tr>
         <td scope="col">R7C1</td>
         <td scope="col">R7C2</td>
         <td scope="col">R7C3</td>
         <td scope="col">R7C4</td>
         <td scope="col">R7C5</td>
         <td scope="col">R7C6</td>
         <td scope="col">R7C7</td>
         <td scope="col">R7C8</td>
         <td scope="col">R7C9</td>
         <td scope="col">R7C10</td>
         <td scope="col">R7C11</td>
         <td scope="col">R7C12</td>
         <td scope="col">R7C13</td>
         <td scope="col">R7C14</td>
         <td scope="col">R7C15</td>
      </tr>
      <tr>
         <td scope="col">R8C1</td>
         <td scope="col">R8C2</td>
         <td scope="col">R8C3</td>
         <td scope="col">R8C4</td>
         <td scope="col">R8C5</td>
         <td scope="col">R8C6</td>
         <td scope="col">R8C7</td>
         <td scope="col">R8C8</td>
         <td scope="col">R8C9</td>
         <td scope="col">R8C10</td>
         <td scope="col">R8C11</td>
         <td scope="col">R8C12</td>
         <td scope="col">R8C13</td>
         <td scope="col">R8C14</td>
         <td scope="col">R8C15</td>
      </tr>
      <tr>
         <td scope="col">R9C1</td>
         <td scope="col">R9C2</td>
         <td scope="col">R9C3</td>
         <td scope="col">R9C4</td>
         <td scope="col">R9C5</td>
         <td scope="col">R9C6</td>
         <td scope="col">R9C7</td>
         <td scope="col">R9C8</td>
         <td scope="col">R9C9</td>
         <td scope="col">R9C10</td>
         <td scope="col">R9C11</td>
         <td scope="col">R9C12</td>
         <td scope="col">R9C13</td>
         <td scope="col">R9C14</td>
         <td scope="col">R9C15</td>
      </tr>
      <tr>
         <td scope="col">R10C1</td>
         <td scope="col">R10C2</td>
         <td scope="col">R10C3</td>
         <td scope="col">R10C4</td>
         <td scope="col">R10C5</td>
         <td scope="col">R10C6</td>
         <td scope="col">R10C7</td>
         <td scope="col">R10C8</td>
         <td scope="col">R10C9</td>
         <td scope="col">R10C10</td>
         <td scope="col">R10C11</td>
         <td scope="col">R10C12</td>
         <td scope="col">R10C13</td>
         <td scope="col">R10C14</td>
         <td scope="col">R10C15</td>
      </tr>
      <tr>
         <td scope="col">R11C1</td>
         <td scope="col">R11C2</td>
         <td scope="col">R11C3</td>
         <td scope="col">R11C4</td>
         <td scope="col">R11C5</td>
         <td scope="col">R11C6</td>
         <td scope="col">R11C7</td>
         <td scope="col">R11C8</td>
         <td scope="col">R11C9</td>
         <td scope="col">R11C10</td>
         <td scope="col">R11C11</td>
         <td scope="col">R11C12</td>
         <td scope="col">R11C13</td>
         <td scope="col">R11C14</td>
         <td scope="col">R11C15</td>
      </tr>
      <tr>
         <td scope="col">R12C1</td>
         <td scope="col">R12C2</td>
         <td scope="col">R12C3</td>
         <td scope="col">R12C4</td>
         <td scope="col">R12C5</td>
         <td scope="col">R12C6</td>
         <td scope="col">R12C7</td>
         <td scope="col">R12C8</td>
         <td scope="col">R12C9</td>
         <td scope="col">R12C10</td>
         <td scope="col">R12C11</td>
         <td scope="col">R12C12</td>
         <td scope="col">R12C13</td>
         <td scope="col">R12C14</td>
         <td scope="col">R12C15</td>
      </tr>
      <tr>
         <td scope="col">R13C1</td>
         <td scope="col">R13C2</td>
         <td scope="col">R13C3</td>
         <td scope="col">R13C4</td>
         <td scope="col">R13C5</td>
         <td scope="col">R13C6</td>
         <td scope="col">R13C7</td>
         <td scope="col">R13C8</td>
         <td scope="col">R13C9</td>
         <td scope="col">R13C10</td>
         <td scope="col">R13C11</td>
         <td scope="col">R13C12</td>
         <td scope="col">R13C13</td>
         <td scope="col">R13C14</td>
         <td scope="col">R13C15</td>
      </tr>
      <tr>
         <td scope="col">R14C1</td>
         <td scope="col">R14C2</td>
         <td scope="col">R14C3</td>
         <td scope="col">R14C4</td>
         <td scope="col">R14C5</td>
         <td scope="col">R14C6</td>
         <td scope="col">R14C7</td>
         <td scope="col">R14C8</td>
         <td scope="col">R14C9</td>
         <td scope="col">R14C10</td>
         <td scope="col">R14C11</td>
         <td scope="col">R14C12</td>
         <td scope="col">R14C13</td>
         <td scope="col">R14C14</td>
         <td scope="col">R14C15</td>
      </tr>
      <tr>
         <td scope="col">R15C1</td>
         <td scope="col">R15C2</td>
         <td scope="col">R15C3</td>
         <td scope="col">R15C4</td>
         <td scope="col">R15C5</td>
         <td scope="col">R15C6</td>
         <td scope="col">R15C7</td>
         <td scope="col">R15C8</td>
         <td scope="col">R15C9</td>
         <td scope="col">R15C10</td>
         <td scope="col">R15C11</td>
         <td scope="col">R15C12</td>
         <td scope="col">R15C13</td>
         <td scope="col">R15C14</td>
         <td scope="col">R15C15</td>
      </tr>
      <tr>
         <td scope="col">R16C1</td>
         <td scope="col">R16C2</td>
         <td scope="col">R16C3</td>
         <td scope="col">R16C4</td>
         <td scope="col">R16C5</td>
         <td scope="col">R16C6</td>
         <td scope="col">R16C7</td>
         <td scope="col">R16C8</td>
         <td scope="col">R16C9</td>
         <td scope="col">R16C10</td>
         <td scope="col">R16C11</td>
         <td scope="col">R16C12</td>
         <td scope="col">R16C13</td>
         <td scope="col">R16C14</td>
         <td scope="col">R16C15</td>
      </tr>
      <tr>
         <td scope="col">R17C1</td>
         <td scope="col">R17C2</td>
         <td scope="col">R17C3</td>
         <td scope="col">R17C4</td>
         <td scope="col">R17C5</td>
         <td scope="col">R17C6</td>
         <td scope="col">R17C7</td>
         <td scope="col">R17C8</td>
         <td scope="col">R17C9</td>
         <td scope="col">R17C10</td>
         <td scope="col">R17C11</td>
         <td scope="col">R17C12</td>
         <td scope="col">R17C13</td>
         <td scope="col">R17C14</td>
         <td scope="col">R17C15</td>
      </tr>
      <tr>
         <td scope="col">R18C1</td>
         <td scope="col">R18C2</td>
         <td scope="col">R18C3</td>
         <td scope="col">R18C4</td>
         <td scope="col">R18C5</td>
         <td scope="col">R18C6</td>
         <td scope="col">R18C7</td>
         <td scope="col">R18C8</td>
         <td scope="col">R18C9</td>
         <td scope="col">R18C10</td>
         <td scope="col">R18C11</td>
         <td scope="col">R18C12</td>
         <td scope="col">R18C13</td>
         <td scope="col">R18C14</td>
         <td scope="col">R18C15</td>
      </tr>
      <tr>
         <td scope="col">R19C1</td>
         <td scope="col">R19C2</td>
         <td scope="col">R19C3</td>
         <td scope="col">R19C4</td>
         <td scope="col">R19C5</td>
         <td scope="col">R19C6</td>
         <td scope="col">R19C7</td>
         <td scope="col">R19C8</td>
         <td scope="col">R19C9</td>
         <td scope="col">R19C10</td>
         <td scope="col">R19C11</td>
         <td scope="col">R19C12</td>
         <td scope="col">R19C13</td>
         <td scope="col">R19C14</td>
         <td scope="col">R19C15</td>
      </tr>
      <tr>
         <td scope="col">R20C1</td>
         <td scope="col">R20C2</td>
         <td scope="col">R20C3</td>
         <td scope="col">R20C4</td>
         <td scope="col">R20C5</td>
         <td scope="col">R20C6</td>
         <td scope="col">R20C7</td>
         <td scope="col">R20C8</td>
         <td scope="col">R20C9</td>
         <td scope="col">R20C10</td>
         <td scope="col">R20C11</td>
         <td scope="col">R20C12</td>
         <td scope="col">R20C13</td>
         <td scope="col">R20C14</td>
         <td scope="col">R20C15</td>
      </tr>
      <tr>
         <td scope="col">R21C1</td>
         <td scope="col">R21C2</td>
         <td scope="col">R21C3</td>
         <td scope="col">R21C4</td>
         <td scope="col">R21C5</td>
         <td scope="col">R21C6</td>
         <td scope="col">R21C7</td>
         <td scope="col">R21C8</td>
         <td scope="col">R21C9</td>
         <td scope="col">R21C10</td>
         <td scope="col">R21C11</td>
         <td scope="col">R21C12</td>
         <td scope="col">R21C13</td>
         <td scope="col">R21C14</td>
         <td scope="col">R21C15</td>
      </tr>
      <tr>
         <td scope="col">R22C1</td>
         <td scope="col">R22C2</td>
         <td scope="col">R22C3</td>
         <td scope="col">R22C4</td>
         <td scope="col">R22C5</td>
         <td scope="col">R22C6</td>
         <td scope="col">R22C7</td>
         <td scope="col">R22C8</td>
         <td scope="col">R22C9</td>
         <td scope="col">R22C10</td>
         <td scope="col">R22C11</td>
         <td scope="col">R22C12</td>
         <td scope="col">R22C13</td>
         <td scope="col">R22C14</td>
         <td scope="col">R22C15</td>
      </tr>
      <tr>
         <td scope="col">R23C1</td>
         <td scope="col">R23C2</td>
         <td scope="col">R23C3</td>
         <td scope="col">R23C4</td>
         <td scope="col">R23C5</td>
         <td scope="col">R23C6</td>
         <td scope="col">R23C7</td>
         <td scope="col">R23C8</td>
         <td scope="col">R23C9</td>
         <td scope="col">R23C10</td>
         <td scope="col">R23C11</td>
         <td scope="col">R23C12</td>
         <td scope="col">R23C13</td>
         <td scope="col">R23C14</td>
         <td scope="col">R23C15</td>
      </tr>
      <tr>
         <td scope="col">R24C1</td>
         <td scope="col">R24C2</td>
         <td scope="col">R24C3</td>
         <td scope="col">R24C4</td>
         <td scope="col">R24C5</td>
         <td scope="col">R24C6</td>
         <td scope="col">R24C7</td>
         <td scope="col">R24C8</td>
         <td scope="col">R24C9</td>
         <td scope="col">R24C10</td>
         <td scope="col">R24C11</td>
         <td scope="col">R24C12</td>
         <td scope="col">R24C13</td>
         <td scope="col">R24C14</td>
         <td scope="col">R24C15</td>
      </tr>
      <tr>
         <td scope="col">R25C1</td>
         <td scope="col">R25C2</td>
         <td scope="col">R25C3</td>
         <td scope="col">R25C4</td>
         <td scope="col">R25C5</td>
         <td scope="col">R25C6</td>
         <td scope="col">R25C7</td>
         <td scope="col">R25C8</td>
         <td scope="col">R25C9</td>
         <td scope="col">R25C10</td>
         <td scope="col">R25C11</td>
         <td scope="col">R25C12</td>
         <td scope="col">R25C13</td>
         <td scope="col">R25C14</td>
         <td scope="col">R25C15</td>
      </tr>
   </tbody>
</table>

【问题讨论】：

没有纯 CSS 的跨浏览器解决方案。您可能会发现 datatables.net 很方便，因为它涵盖了您的所有要求（除了没有 js 的要求），并且它支持 BS4。

标签： html css twitter-bootstrap responsive-design bootstrap-4

【解决方案1】：

执行此操作的方法是配置@media Rules。对于较小的屏幕，您需要为表格设置一个固定的宽度大小，并将overflow-x 设置为scroll 以启用表格内容在左右边缘溢出时的滚动。

为了实现这一点，我们必须在设备尺寸小于 576px 的情况下改变小屏幕上表格的尺寸。

您可以根据自己的设计在此处确定表格的最小宽度要求。 min-width 可以是 992px 而不是 768px。或任何东西你选。

之后我们必须应用我们上面提到的溢出概念。

您的媒体规则现在应该是这样的 Where the minimum width of our table is 768px:

@media (min-width: 576px) {  
    .table-sm {
        width: 768px;
        oveflow-x:scroll;
    }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }

    .table-xl {
        width: 100%;
    }
}

【讨论】：