diff options
| author | bt <bt@btxx.org> | 2024-06-08 13:22:19 -0400 |
|---|---|---|
| committer | bt <bt@btxx.org> | 2024-06-08 13:22:19 -0400 |
| commit | dcfb172704f3afb68a30425029ec834be2883274 (patch) | |
| tree | 02ac480745db802d7af03f3213a0c568322170e3 /build/tables/index.html | |
| parent | e146f8a64c793c337999ce316b16ebe5fe6f2dab (diff) | |
More content porting, on-going markdown changes for lowdown support
Diffstat (limited to 'build/tables/index.html')
| -rw-r--r-- | build/tables/index.html | 76 |
1 files changed, 50 insertions, 26 deletions
diff --git a/build/tables/index.html b/build/tables/index.html index 82109e9..224fd6b 100644 --- a/build/tables/index.html +++ b/build/tables/index.html @@ -1,42 +1,54 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Making Tables Responsive With Minimal CSS</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> + <link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" /> +<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style> </head> <nav> - <a href="#menu">Menu ↓</a> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Making Tables Responsive With Minimal CSS</h1> +<h1 id="making-tables-responsive-with-minimal-css">Making Tables Responsive With Minimal CSS</h1> + <p>2019-06-11</p> -<p><div class="update-box"> - <strong>Update (Oct 2019):</strong> <a href="https://twitter.com/aardrian">@aardrian</a> wrote a previous post about how changing the <code>display</code> properties on tables can impact screen readers. I highly recommend his excellent article <a href="https://adrianroselli.com/2018/02/tables-css-display-properties-and-aria.html">Tables, CSS Display Properties, and ARIA</a> -</div></p> -<hr /> -<p>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.</p> -<p>My recent article, <a href="/html-like-1999">Write HTML Like It's 1999</a>, received far more attention than I ever expected on HackerNews. With this attention came a few comments mentioning how <code>table</code> elements don't play nice with mobile devices or that it's not possible to have a useable layout on smaller screens. <em>This simply isn't true</em>.</p> + +<hr/> + +<p>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.</p> + +<p>My recent article, <a href="/html-like-1999">Write HTML Like It’s 1999</a>, received far more attention than I ever expected on HackerNews. With this attention came a few comments mentioning how <code>table</code> elements don’t play nice with mobile devices or that it’s not possible to have a useable layout on smaller screens. <em>This simply isn’t true</em>.</p> + <p>Included below are two separate demos showing how to optimize <code>table</code> 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 <code>div</code> elements to <em>look</em> like tables.</p> -<h2>Demo 1: Just let them scroll</h2> -<p>Okay I will admit, this implementation isn't the <em>greatest</em> but I find it does work well with huge datasets. Simply set a <code>min-width</code> on your parent <code>table</code> element and the browser will just require the user to scroll the contents horizontally.</p> + +<h2 id="demo-1-just-let-them-scroll">Demo 1: Just let them scroll</h2> + +<p>Okay I will admit, this implementation isn’t the <em>greatest</em> but I find it does work well with huge datasets. Simply set a <code>min-width</code> on your parent <code>table</code> element and the browser will just require the user to scroll the contents horizontally.</p> + <pre><code>table { - min-width: 800px; /* Set your desired min-width here */ + min-width: 800px; /* Set your desired min-width here */ } </code></pre> + <p>Check out the CodePen below to see it in action:</p> + <p><a href="https://codepen.io/bradleytaunt/pen/ewObbW/">Live CodePen Example</a></p> -<p>I actually prefer this method because of its simplicity and function. Users on mobile are familiar with scrolling since it is one of the most basic actions required. Seeing a "cut-off" table gives them an instant visual cue that they have the ability to scroll the content.</p> -<h2>Demo 2: More <u>flex</u>ible than you think</h2> + +<p>I actually prefer this method because of its simplicity and function. Users on mobile are familiar with scrolling since it is one of the most basic actions required. Seeing a “cut-off” table gives them an instant visual cue that they have the ability to scroll the content.</p> + +<h2 id="demo-2-more-flexible-than-you-think">Demo 2: More flexible than you think</h2> + <p>Using something like <code>flexbox</code> tends to work better when you are working with smaller table datasets. All you need to do is add some minor <code>flexbox</code> layout at your targeted mobile screen size.</p> -<pre><code>/* Using 800px as mobile screen in this example */ + +<pre><code>/* Using 800px as mobile screen in this example */ @media(max-width: 800px) { - /* Hide the table headings */ + /* Hide the table headings */ table thead { left: -9999px; position: absolute; @@ -51,19 +63,24 @@ } table td { border: 1px solid; - margin: 0 -1px -1px 0; /* Removes double-borders */ + margin: 0 -1px -1px 0; /* Removes double-borders */ width: 50%; } } </code></pre> + <p><a href="https://codepen.io/bradleytaunt/pen/mZbvOb/">Check out the CodePen demo</a></p> + <p>There are some caveats with this approach:</p> + <ol> <li>We currently hide the <code>thead</code> row when in mobile view (only visually - screen readers can still scan it)</li> <li>Some more custom work might be needed depending on how many items per <code>flexbox</code> row makes sense (based on project and dataset)</li> </ol> + <p>You could keep the table headings and style them the same as the <code>tbody</code> contents, but I find hiding them a little cleaner. That choice is entirely up to your personal preference. You can also decide to add heading <code>span</code> elements inside the main <code>tbody</code> elements like so:</p> -<pre><code>/* Default span styling - hidden on desktop */ + +<pre><code>/* Default span styling - hidden on desktop */ table td span { background: #eee; color: dimgrey; @@ -77,7 +94,7 @@ table td span { left: 0; } -/* Simple CSS for flexbox table on mobile */ +/* Simple CSS for flexbox table on mobile */ @media(max-width: 800px) { table thead { left: -9999px; @@ -94,23 +111,30 @@ table td span { table td { border: 1px solid; margin: 0 -1px -1px 0; - padding-top: 35px; /* additional padding to avoid heading overlap */ + padding-top: 35px; /* additional padding to avoid heading overlap */ position: relative; width: 50%; } - /* Show the heading span */ + /* Show the heading span */ table td span { display: block; } } </code></pre> + <p><a href="https://codepen.io/bradleytaunt/pen/mZdzmZ/">Live CodePen Example</a></p> + <p><strong>Updated</strong>: As pointed out by user <a href="https://news.ycombinator.com/user?id=mmoez">mmoez</a>, it is far less repetitive to use <code>:nth-child</code> pseudo selectors to implement the heading fields on mobile (as outlined in this <a href="https://css-tricks.com/responsive-data-tables/">CSS-Tricks article</a>).</p> -<h2>Why should I care to use <code>table</code> elements?</h2> + +<h2 id="why-should-i-care-to-use-elements">Why should I care to use <code>table</code> elements?</h2> + <p>Simply put: <strong>accessibility</strong> and <strong>proper semantics</strong>.</p> -<p>Why use a screwdriver when you need a hammer? Sure, you can make that screwdriver look and <em>almost</em> work the same as a hammer, but for what purpose? Just use the damn hammer<sup>1</sup>.</p> + +<p>Why use a screwdriver when you need a hammer? Sure, you can make that screwdriver look and <em>almost</em> work the same as a hammer, but for what purpose? Just use the damn hammer1.</p> + <p>Have fun making your tables responsive!</p> -<p><small><sup>1</sup> I know, this is a terrible analogy...</small></p> + +<p>1 I know, this is a terrible analogy…</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> |