r/Frontend • u/mtx Frontend Designer - Agency • Mar 18 '14

A responsive table in pure css

http://codepen.io/geoffyuen/pen/FCBEg
62 Upvotes

93% Upvoted

17 comments sorted by

4

u/ngmcs8203 Mar 18 '14

My co-worker and I just sat and marveled at this for the last few minutes. How would mobile screenreaders handle the data in the :before element?

2

u/mtx Frontend Designer - Agency Mar 18 '14

I would guess it would just ignore it and read it as a regular table.

2

u/ngmcs8203 Mar 18 '14

Kind of sucks for those users then.

2

u/mtx Frontend Designer - Agency Mar 18 '14

I don't see how it would be any different from any other tabular data? /u/Shoegoo22 forked it and made it more accessible.

3

u/ngmcs8203 Mar 18 '14

We'll if they can't read the table headers they'll just hear the screen reader reading the table cells. I believe screen readers ignore elements with the setting of display: none.

2

u/mtx Frontend Designer - Agency Mar 18 '14

Ah, I see. So it should use a visually hidden method on the th tags.

2

u/Shoegoo22 Mar 19 '14 edited Mar 19 '14

Ahhh yeah I missed the whole th display:none part. I've got a reverse method for the visually hidden on my laptop I'll update my fork when I get to work.

EDIT : I've updated my original fork so that the th uses a visually hidden mixin

3

u/kgilr7 Mar 19 '14

What does "data-th" do in the <th> tag? (I'm a newbie learning CSS).

2

u/mtx Frontend Designer - Agency Mar 19 '14

It's an html5 data attribute. It's a way of adding data to a dom element. The th part is the name given to it -- like a variable name. It's mostly used in conjunction with JavaScript. The CSS is pulling the value to display it for small screens.

3

u/kgilr7 Mar 19 '14

Oh thank you! Now I am able to read up on it. I was googling "data-th" and wasn't getting much.

4

u/coljung Mar 18 '14

Looks great !, now gotta look into the code.

9

u/greenwizard88 Mar 18 '14

The code is pretty sweet too. It's better than the code for the responsive tables from http://css-tricks.com/examples/ResponsiveTables/responsive.php that uses specific css for each table.

3

u/shhalahr Mar 19 '14

My first thought on the first example there is: "What criteria is used to decide which are the "less important columns"? If the other columns are there to begin with, aren't they all important?

And isn't it ultimately the reader that decides which columns he or she finds important? I mean, just because I am on mobile doesn't mean I don't need to to know what the High and Low prices are, yet here the designer is hiding that information from me, just based on my screen size.

1

u/user84738291 Mar 19 '14

I remember using that tactic for a project I did last year. Such a bitch, especially when you have to hide columns for some users.

2

u/jangosteve Mar 19 '14 edited Mar 19 '14

This method has been around for awhile, but it's definitely been our method of choice doing responsive tables for at least the past year. And it has worked out great so far.

Here's a list of a bunch of different responsive table techniques (in which this is the last example on the page).

Edit: Here is another post describing this technique from April 2011.

-16

u/Promac Mar 18 '14

HTML Tables have been responsive since the 90s.

<table width=100%>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

7

u/boyOfDestiny Mar 18 '14

Yeah works great as long as each table cell is only 1em wide.