我有一个巨大的表，试图通过Bootstrap 4以适合移动设备的方式显示。我的表的列数（<10）和行数（最多100）可变。是否有CSS解决方案可以让我拥有：
找不到解决方案，期待您的帮助。
Jsfiddle示例here
<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>
答案 0 :(得分：0)
执行此操作的方法是配置@media Rules。对于较小的屏幕，您需要为表格提供固定的宽度大小，为overflow-x设置scroll的大小以使表格的内容在左右边缘溢出时可以滚动。
为此，例如，当设备的尺寸小于576像素时，我们必须在小屏幕上更改表格的尺寸。
您可以根据自己的设计来决定桌子的最小宽度 要求。最小宽度可以是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%;
}
}