Mobile-Friendly Table

There are several ways to display <table> on mobile devices. https://www.liquidlight.co.uk/blog/tables-in-responsive-design/

I found CSS-responsive table is the simplest approach to show <table> on mobile and here I want to share how it is done.

To make a long story short, these things are what I do when it is a mobile device.

1. hide <thead>
2. change <td> from table-cell to flex
3. Add a pseudo-element td::before with the contents of label attribute value.

Simple, eh? The following is CSS representation of the above #1, #2, and #3

@media screen and (max-width: 600px) {
  table thead {
    display: none;
  }
  table td {
    display: flex;
  }
  
  table td::before {
    content: attr(label);
    font-weight: bold;
    width: 120px;
    min-width: 120px;
  }
}

To make all to work, your table must be well structured with thead and tbody , and each td must have attribute label attribute.

You may think having label attribute on all td tags are too much coding, and I also think so. If you want to set label attribute with Javascript run the following small function.

window.setMobileTable = function(selector) {
  // if (window.innerWidth > 600) return false;
  const…