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.
- hide
<thead>
- change
<td>
fromtable-cell
toflex
- Add a pseudo-element
td::before
with the contents oflabel
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…