Making Tables Responsive with Minimal CSS


I find that the necessity to invent responsive table layouts pops up some distance extra generally than most builders would question. The gut reaction would possibly perhaps perhaps also to be put in drive some style of personalized grid-method or pull in a pre-built library. Originate no longer stop this – factual employ tables and a few easy CSS.

My contemporary article, Write HTML Relish It’s 1999, got some distance extra attention than I ever expected on HackerNews. With this attention came a couple of feedback bringing up how table components don’t play good with mobile gadgets or that it’s no longer that it’s doubtless you’ll perhaps perhaps perhaps also bring to mind to obtain a useable layout on smaller monitors. This simply isn’t true.

Included below are two separate demos showing suggestions to optimize table HTML for mobile gadgets the employ of easiest a minimal amount of CSS. These implementations would possibly perhaps perhaps perhaps no longer be ideal, nonetheless they are some distance superior to injecting a bunch of personalized div components to be taught about love tables.

Ok I will admit, this implementation isn’t the superb nonetheless I find it does work nicely with huge datasets. Merely role a min-width to your father or mother table element and the browser will factual require the actual person to scroll the contents horizontally.

table {
    min-width: 800px; /* Put your desired min-width here */
}

Examine out the CodePen below to be taught about it in action:

See the Pen
Responsive Tables #1: Horizontal Scrolling
by Bradley Taunt (@bradleytaunt)
on CodePen.

I truly engage this kind attributable to of its simplicity and characteristic. Customers on mobile are acquainted with scrolling because it’s one in all the most traditional actions required. Seeing a “lower-off” table affords them an prompt visual cue that they’ve the ability to scroll the converse material.

Demo 2: Extra flexible than you specialise in

The employ of one thing love flexbox tends to work better within the occasion it’s doubtless you’ll perhaps perhaps perhaps be working with smaller table datasets. All you would possibly perhaps stop is add some minor flexbox layout at your targeted mobile conceal size.

/* The employ of 800px as mobile conceal on this instance */
@media(max-width: 800px) {
    /* Camouflage the table headings */
    table thead {
        left: -9999px;
        space: absolute;
        visibility: hidden;
    }
    table tr {
        border-bottom: 0;
        present: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 40px;
    }
    table td {
        border: 1px right;
        margin: 0 -1px -1px 0; /* Removes double-borders */
        width: 50%;
    }
}

Examine out the CodePen demo below:

See the Pen
Responsive Tables #2: Flexbox
by Bradley Taunt (@bradleytaunt)
on CodePen.

There are some caveats with this trend:

  1. We currently conceal the thead row when in mobile look (easiest visually – conceal readers can silent scan it)
  2. Some extra personalized work would be wished reckoning on what number of items per flexbox row is luminous (in accordance with venture and dataset)

It is doubtless you’ll perhaps perhaps perhaps shield the table headings and grace them equivalent to the tbody contents, nonetheless I find hiding them a minute cleaner. That need is entirely up to your own need. You will additionally make a resolution to be able to add heading span components within the first tbody components love so:

/* Default span styling - hidden on desktop */
table td span {
    background: #eee;
    coloration: dimgrey;
    present: none;
    font-size: 10px;
    font-weight: fearless;
    padding: 5px;
    space: absolute;
    text-transform: uppercase;
    high: 0;
    left: 0;
}

/* Easy CSS for flexbox table on mobile */
@media(max-width: 800px) {
    table thead {
        left: -9999px;
        space: absolute;
        visibility: hidden;
    }
    table tr {
        border-bottom: 0;
        present: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 40px;
    }
    table td {
        border: 1px right;
        margin: 0 -1px -1px 0;
        padding-high: 35px; /* extra padding to shield some distance off from heading overlap */
        space: relative;
        width: 50%;
    }
    /* Sing the heading span */
    table td span {
        present: block;
    }
}

See the Pen
Responsive Tables #2.5: Flexbox
by Bradley Taunt (@bradleytaunt)
on CodePen.

Updated: As identified by particular person mmoez, it’s some distance less repetitive to employ :nth-child pseudo selectors to place in drive the heading fields on mobile (as outlined on this CSS-Options article).

Why must I care to employ table components?

Merely build: accessibility and true kind semantics.

Why employ a screwdriver within the occasion you will want a hammer? Obvious, it’s doubtless you’ll perhaps perhaps perhaps also construct that screwdriver be taught about and nearly work equivalent to a hammer, nonetheless for what reason? Factual employ the damn hammer1.

Have stress-free making your tables responsive!

1 I do know, here’s a unpleasant analogy…


Have one thing to speak?

Attain out and chat with me on Twitter. That means your tips don’t seem to be misplaced forever on this convey.

Read More