Chen Hui Jing has tackled a ton of design patterns for tables that might come in handy when creating tables that are easy to read and responsive for the web:
There are a myriad of table design patterns out there, and which approach you pick depends heavily on the type of data you have and the target audience for that data. At the end of the day, tables are a method for the organisation and presentation of data. It is important to figure out which information matters most to your users and decide on an approach that best serves their needs.
This reminds me of way back when Chris wrote about responsive data tables and just how tricky they are to get right. Also there’s a great post by Richard Rutter in a similar vein where he writes about the legibility of tables and fine typography:
Many tables, such as financial statements or timetables, are made up mostly of numbers. Generally speaking, their purpose is to provide the reader with numeric data, presented in either columns or rows, and sometimes in a matrix of the two. Your reader may use the table by scanning down the columns, either searching for a data point or by making comparisons between numbers. Your reader may also make sense of the data by simply glancing at the column or row. It is far easier to compare numbers if the ones, tens and hundreds are all lined up vertically; that is, all the digits should occupy exactly the same width.
One of my favorite table patterns that I now use consistently is one with a sticky header. Like this demo here:
See the Pen
Table Sticky Header by Robin Rendle (@robinrendle)
on CodePen.
As a user myself, I find that when I’m scrolling through large tables of data with complex information, I tend to forget what one column is all about and then I’ll have to scroll all the way back up to the top again to read the column header.
Anyway, all this makes me think that I would read a whole dang book on the subject of the <table> element and how to design data accurately and responsively.
You shuld put a z-index. Otherwise tbody overlapse the thead row
Remember, as soon as you change the
displayproperty of a table element, you break it in the accessibility tree. If you have any CSS doing this at any media query, then ensure you use arole="element type"on any table element that you’re changing thedisplayproperty for.