From 14074019d62d98885c4c764401a9e7e1fd129f79 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Mon, 10 Jun 2024 10:12:28 -0400 Subject: Set proper timestamps for header and footer HTML templates, update some post contents --- build/posts/tables/index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'build/posts/tables/index.html') diff --git a/build/posts/tables/index.html b/build/posts/tables/index.html index bc3c6d2..421c0c6 100644 --- a/build/posts/tables/index.html +++ b/build/posts/tables/index.html @@ -18,9 +18,10 @@

Making Tables Responsive With Minimal CSS

2019-06-11

+

Update (Oct 2019): @aardrian wrote a previous post about how changing the display properties on tables can impact screen readers. I highly recommend his excellent article Tables, CSS Display Properties, and ARIA

I find that the need to create responsive table layouts pops up far more often than most developers would expect. The gut reaction might to be implement some sort of custom grid-system or pull in a pre-built library. Don’t do this - just use tables and some simple CSS.

-

My recent article, Write HTML Like It’s 1999, received far more attention than I ever expected on HackerNews. With this attention came a few comments mentioning how table elements don’t play nice with mobile devices or that it’s not possible to have a useable layout on smaller screens. This simply isn’t true.

+

My recent article, Write HTML Like It’s 1999, received far more attention than I ever expected on HackerNews. With this attention came a few comments mentioning how table elements don’t play nice with mobile devices or that it’s not possible to have a useable layout on smaller screens. This simply isn’t true.

Included below are two separate demos showing how to optimize table HTML for mobile devices using only a minimal amount of CSS. These implementations may not be perfect, but they are far superior to injecting a bunch of custom div elements to look like tables.

Demo 1: Just let them scroll

Okay I will admit, this implementation isn’t the greatest but I find it does work well with huge datasets. Simply set a min-width on your parent table element and the browser will just require the user to scroll the contents horizontally.

-- cgit v1.2.3-54-g00ecf