问题
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:
- 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 example here
Table 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>
回答1:
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.
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.
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.
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%;
}
}
来源：https://stackoverflow.com/questions/53357026/bootstrap-4-scroll-table-body