Nsryjdtyk

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>

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%;

    }

}