Bootstrap 4:滚动表主体 [英] Bootstrap 4: scroll table body
本文介绍了Bootstrap 4:滚动表主体的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个巨大的表，正在尝试使用Bootstrap 4以适合移动设备的方式显示.我的表具有可变数量的列(<10)和行(最多100).是否有CSS解决方案可以让我拥有:
I have a huge table that I am trying to display in a mobile-friendly manner, using Bootstrap 4. My table has a variable number of columns (<10) and rows (up to 100). Is there a CSS solution allowing me to have:
-
固定标题，每一列具有与它"相同的宽度.行
- 宽度/高度超过容器大小时，x/y上的可滚动主体
- 标题在带有表体的x上滚动
- 行不会被包裹在移动/大型台式机上
- 如果可能，请不要使用JS
- a fixed header, with each column having the same width as "its" rows
- a scrollable body on x/y when width/height exceed the container size
- the header scrolling on x with the table body
- rows never being wrapped be it on mobile / large desktop
- no JS if possible
找不到解决方案，期待您的帮助.
Can't find a solution, looking forward to your help.
Jsfiddle示例此处
Jsfiddle example 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>
推荐答案
做到这一点的方法是配置@media Rules.对于较小的屏幕，您需要为表格提供固定的宽度大小，为overflow-x设置overflow-x，以便在表格的左右边缘溢出时滚动表格的内容.
The way to do this is by configuring @media Rules. You need to give your table a fixed width size for smaller screens and overflow-x to be scroll to enable scrolling the content of the table, when it overflows at the left and right edges.
要实现此目的，例如，当设备的尺寸小于576px时，我们必须在小屏幕上更改表格的尺寸.
To achieve this, we have to change the size of the table on small screens when the size of the device is smaller than 576px for example.
您可以根据自己的设计来决定桌子的最小宽度 要求.最小宽度可以是992px，而不是768px.还是什么 你选.
You decide the minimum width of your table here, based on your design requirements. min-width could be 992px instead of 768px. Or anything you choose.
此后，我们必须应用上面提到的溢出概念.
After that we have to apply the overflowing concept we mentioned above.
您现在的媒体规则应该是这样的
Where the minimum width of our table is 768px:
Your media rules should be something like this now
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%;
}
}
这篇关于Bootstrap 4:滚动表主体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
