<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h1>CSS only Responsive Tables</h1> <h2>Basic overflow:</h2> <table class="table table-hove rtable"> <thead> <tr> <th>Browser</th> <th>Sessions</th> <th>Percentage</td> <th>New Users</th> <th>Avg. Duration</th> </tr> </thead> <tbody> <tr> <td>Chrome</td> <td>9,562</td> <td>68.81%</td> <td>7,895</td> <td>01:07</td> </tr> <tr> <td>Firefox</td> <td>2,403</td> <td>17.29%</td> <td>2,046</td> <td>00:59</td> </tr> <tr> <td>Safari</td> <td>1,089</td> <td>2.63%</td> <td>904</td> <td>00:59</td> </tr> <tr> <td>Internet Explorer</td> <td>366</td> <td>2.63%</td> <td>333</td> <td>01:01</td> </tr> <tr> <td>Safari (in-app)</td> <td>162</td> <td>1.17%</td> <td>112</td> <td>00:58</td> </tr> <tr> <td>Opera</td> <td>103</td> <td>0.74%</td> <td>87</td> <td>01:22</td> </tr> <tr> <td>Edge</td> <td>98</td> <td>0.71%</td> <td>69</td> <td>01:18</td> </tr> <tr> <td>Other</td> <td>275</td> <td>6.02%</td> <td>90</td> <td>N/A</td> </tr> </tbody> </table> <h2>Flipped axis and overflow:</h2> <table class="rtable rtable--flip"> <thead> <tr> <th>Browser</th> <th>Sessions</th> <th>Percentage</td> <th>New Users</th> <th>Avg. Duration</th> </tr> </thead> <tbody> <tr> <td>Chrome</td> <td>9,562</td> <td>68.81%</td> <td>7,895</td> <td>01:07</td> </tr> <tr> <td>Firefox</td> <td>2,403</td> <td>17.29%</td> <td>2,046</td> <td>00:59</td> </tr> <tr> <td>Safari</td> <td>1,089</td> <td>2.63%</td> <td>904</td> <td>00:59</td> </tr> <tr> <td>Internet Explorer</td> <td>366</td> <td>2.63%</td> <td>333</td> <td>01:01</td> </tr> <tr> <td>Safari (in-app)</td> <td>162</td> <td>1.17%</td> <td>112</td> <td>00:58</td> </tr> <tr> <td>Opera</td> <td>103</td> <td>0.74%</td> <td>87</td> <td>01:22</td> </tr> <tr> <td>Edge</td> <td>98</td> <td>0.71%</td> <td>69</td> <td>01:18</td> </tr> <tr> <td style="min-width: 100px;">Other</td> <td>275</td> <td>6.02%</td> <td>90</td> <td>N/A</td> </tr> </tbody> </table> <p><a target="_blank" href="http://dbushell.com/2016/03/04/css-only-responsive-tables/">See my blog article for more information</a></p> <h3>Optional adjustments to suit your content:</h3> <ul> <li><code>white-space: nowrap</code> is optional on the <code><table></code> element</li> <li>Add <code>min-width</code> to cells to better space content</li> <li>Wrap the flip CSS in a media query?</li> </ul> <p><strong>Please note:</strong> this CodePen has Autoprefixer enabled. You may need vendor prefixes for full CSS gradient and Flexbox support.</p> <p><strong>Supports:</strong> IO7+, Android 4.3+</p> <p><strong>by: <a target="_blank" href="http://dbushell.com/">David Bushell</a></strong> </div> </div>

.rtable { display: inline-block; vertical-align: top; max-width: 100%; overflow-x: auto; white-space: nowrap; border-collapse: collapse; border-spacing: 0; } .rtable, .rtable--flip tbody { -webkit-overflow-scrolling: touch; background: -webkit-radial-gradient(left ellipse, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, -webkit-radial-gradient(right ellipse, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center; background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center; background-size: 10px 100%, 10px 100%; background-attachment: scroll, scroll; background-repeat: no-repeat; } .rtable td:first-child, .rtable--flip tbody tr:first-child { background-image: -webkit-linear-gradient(left, white 50%, rgba(255, 255, 255, 0) 100%); background-image: linear-gradient(to right, white 50%, rgba(255, 255, 255, 0) 100%); background-repeat: no-repeat; background-size: 20px 100%; } .rtable td:last-child, .rtable--flip tbody tr:last-child { background-image: -webkit-linear-gradient(right, white 50%, rgba(255, 255, 255, 0) 100%); background-image: linear-gradient(to left, white 50%, rgba(255, 255, 255, 0) 100%); background-repeat: no-repeat; background-position: 100% 0; background-size: 20px 100%; } .rtable th { font-size: 11px; text-align: left; text-transform: uppercase; background: #f2f0e6; } .rtable th, .rtable td { padding: 6px 12px; border: 1px solid #d9d7ce; } .rtable--flip { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden; background: none; } .rtable--flip thead { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; min-width: -webkit-min-content; min-width: -moz-min-content; min-width: min-content; } .rtable--flip tbody { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; overflow-x: auto; overflow-y: hidden; } .rtable--flip tr { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; min-width: -webkit-min-content; min-width: -moz-min-content; min-width: min-content; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } .rtable--flip td, .rtable--flip th { display: block; } .rtable--flip td { background-image: none !important; border-left: 0; } .rtable--flip th:not(:last-child), .rtable--flip td:not(:last-child) { border-bottom: 0; } /*! // CodePen house keeping */ body { margin: 0; padding: 25px; color: #494b4d; font-size: 14px; line-height: 20px; } h1, h2, h3 { margin: 0 0 10px 0; color: #1d97bf; } h1 { font-size: 25px; line-height: 30px; } h2 { font-size: 20px; line-height: 25px; } h3 { font-size: 16px; line-height: 20px; } table { margin-bottom: 30px; } a { color: #ff6680; } code { background: #fffbcc; font-size: 12px; }