There are many types of tables on websites where content can vary as wildly as the approaches used to make them responsive. There are really no comprehensive CSS based solution for making a table responsive.
I set out to find a flexible and simple solution that could work as a reusable web component, regardless of the content within. See bellow:
Demo:
The Code:
@media only screen and (max-width: 768px) {
.override .res-tbl { border: 0; border-collapse: collapse; }
.override .res-tbl, .override .res-tbl thead, .override .res-tbl tbody, .override .res-tbl th, .override .res-tbl td, .override .res-tbl tr { display: block; }
.override .res-tbl thead tr { position: absolute; top: -9999px; left: -9999px; overflow: hidden; }
.override .res-tbl tbody tr { margin: 0 0 15px 0; display: flex; flex-flow: column; border: 1px solid #ddd; border-bottom: 0; }
.override .res-tbl tbody tr:nth-child(odd) { }
.override .res-tbl tbody tr:nth-child(even) { }
.override .res-tbl tr td { border-top: none; border-left: none; border-right: none; border-bottom: 1px solid #ddd; position: relative; padding-left: 40%; word-wrap: break-word; }
.override .res-tbl tr td: last-child { border-bottom: none; }
.override .res-tbl tr td:first-child { border-top: 1px solid #ddd; }
.override .res-tbl td:before { position: absolute; top: 6px; left: 6px; width: 55%; padding-right: 10px; white-space: nowrap; content: attr(data-label); text-align: left; }
}
Breaking point starts at 768px, you can change it to any value you want. Also notice we’re using a “.override” class which we have add to our body element as <body class=”override”> to give our CSS more priority therefore allowing override without having to use “!important” attribute in every CSS property we define.
Example Usage with Bootstrap Table:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="styles.css"> <!-- Create this file then add our responsive table overrides in it. --? <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body class="override"> <div class="container"> <h2>Basic Table</h2> <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p> <table class="table table-bordered table-striped res-tbl"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> <th>Email</th> <th>Email</th> <th>Email</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td data-label="Firstname">John</td> <td data-label="Lastname">Doe</td> <td data-label="Email">john@example.com</td> <td data-label="Email">john@example.com</td> <td data-label="Email">john@example.com</td> <td data-label="Email">john@example.com</td> <td data-label="Action"><button class="btn btn-default">Edit User</button></td> </tr> <tr> <td data-label="Firstname">Mary</td> <td data-label="Lastname">Moe</td> <td data-label="Email">mary@example.com</td> <td data-label="Email">mary@example.com</td> <td data-label="Email">mary@example.com</td> <td data-label="Email">mary@example.com</td> <td data-label="Action"><button class="btn btn-default">Edit User</button></td> </tr> <tr> <td data-label="Firstname">July</td> <td data-label="Lastname">Dooley</td> <td data-label="Email">july@example.com</td> <td data-label="Email">july@example.com</td> <td data-label="Email">july@example.com</td> <td data-label="Email">july@example.com</td> <td data-label="Action"><button class="btn btn-default">Edit User</button></td> </tr> </tbody> </table> </div> </body> </html>
