Skip to content

Mobile Responsive Tables

November 9, 2020

Tables are naturally not responsive and, most of the time, don't display easily on smaller devices and screen sizes.  Here is an option that can be used to reformat the way the information is displayed on mobile instead of relying on a scrollbar to see items out of view.  You can set the specific breakpoint in the media query, in this example it is set at 860px.

Example

Desktop/Laptop View

responsive-table-desktop-2

Tablet Landscape View

responsive-table-tablet-landscape

For screen sizes under 860px, the table headings are removed, the column cells are stacked in order from left to right within each row to keep the content grouped together.  The data in the first column of the table becomes bolded with a light grey background.  In this case the company names.

Tablet Portrait View

responsive-table-tablet-portrait

Mobile Portrait View

tables-mobile

Here's How

Add this code into Additional CSS for the page.  (If added at the page level instead of at the site level, it will give you flexibility to adjust column widths and media queries per page.)  https://www.screencast.com/t/MEHtbFK5Vi

@media screen and (max-width: 860px) { table {width:100%;} thead {display: none;} tr:nth-of-type(2n) {background-color: inherit;} tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;} tbody td {display: block; text-align:center;} tbody td:before { content: attr(data-th); display: block; text-align:center; } }

Add this code into JavaScript for the page if you'd like to have the column headings displayed for each section.

var headertext = []; var headers = document.querySelectorAll("thead"); var tablebody = document.querySelectorAll("tbody"); for (var i = 0; i < headers.length; i++) { headertext[i]=[]; for (var j = 0, headrow; headrow = headers[i].rows[0].cells[j]; j++) { var current = headrow; headertext[i].push(current.textContent); } } for (var h = 0, tbody; tbody = tablebody[h]; h++) { for (var i = 0, row; row = tbody.rows[i]; i++) { for (var j = 0, col; col = row.cells[j]; j++) { col.setAttribute("data-th", headertext[h][j]); } } }

Add this code using the HTML content type https://www.screencast.com/t/btMhioVYsiZ or using a Text Editor block in the source view https://www.screencast.com/t/Pc2EGBgye.  Be sure to have the table structured properly with the table headings identified as headings "th" as seen below.

<table class="table" width="100%" cellspacing="0" cellpadding="0"> <thead> <tr> <th style="width: 25%;"><b>Name</b></th> <th style="width: 15%;"><b>Phone</b></th> <th style="width: 60%;"><b>Website</b></th> </tr> </thead> <tbody> <tr> <td valign="middle">ABC Company</td> <td valign="middle">(555) 555-5555</td> <td valign="middle"><a href="https://www.abccompany.com" target="_blank" rel="noopener"><u>https://www.abccompany.com</u></a></td> </tr> <tr> <td valign="middle">XYZ Company with long name</td> <td valign="middle">(987) 654-3210</td> <td valign="middle"><a href="http://www.xyzcompany.com" target="_blank" rel="noopener"><u>http://www.xyzcompanywithalongwebsiteaddress.com</u></a></td> </tr> <tr> <td valign="middle">Your Company</td> <td valign="middle">(123) 456-7890</td> <td valign="middle"><a href="http://www.yourcompany.com" target="_blank" rel="noopener"><u>http://www.yourcompany.com</u></a></td> </tr> <tr> <td valign="middle">My Company</td> <td valign="middle">(555) 555-1212</td> <td valign="middle"><a href="https://www.mycompany.com" target="_blank" rel="noopener"><u>www.mycompany.com</u></a></td> </tr> <tr> </tbody> </table>

Here's an example of it in action.  For all screen sizes 860px and higher, it will display formatted in rows and columns in a table style.

Name Phone Website
ABC Company (555) 555-5555 https://www.abccompany.com
XYZ Company with long name (987) 654-3210 http://www.xyzcompany.com?withlongwebsiteaddress
Your Company (123) 456-7890 http://www.yourcompany.com
My Company (555) 555-1212 www.mycompany.com

Please note, long website address will not necessarily wrap in all instances as seen in this example.  It very much depends on specific characters.  For example, "/" will not be a breakpoint, but "?" will be.

Scroll To Top