Stackable Responsive Tables – HTML & CSS Problem – Table is Desktop and Mobile

[JZ]

I currently run a website called Greatest Reviews.

On my website I have many different posts.

Each post has a comparison table.

I have used this tutorial here to make the tables.

What I have been doing is copying the css and pasting it changing from responsive to responsive2 etc etc

Most of the time they work fine but sometimes they don’t and it’s a pain.

The reasoning behind this is because it’s a stackable/responsive table, it has content in the mobile stacked table which are the “catergories” so to speak.

If you take a look at this post, Best Badminton Racket, you’ll see that I have model, image, weight, grip size etc etc

If you make your browser not as wide, you’ll see it changes to a stackable table with the same catergories.

I believe that this is because they are in the CSS.

Is there an easy way to do this so I only need to enter the CSS once and not have to copy and paste and keep changing every responsive2 to responsive3 etc??

[Beverleyh]

Have a look into using the value of adata- attribute to populate your CSS content: "My Category"; instead. This way you can define categories from within the HTML and the CSS remains unchanged https://davidwalsh.name/css-content-attr

[JZ]

How would that work though on mobile view?

Like what i mean is it only gets the data for the stacked tables from the css. it doesn’t get it from the html

so how do i change that?

I have put the HTML and CSS in “Codepen”

https://codepen.io/greatestreviews/pen/JNogOK

That’s the link ^

If you see on this codepen preview thingy, it shows the mobile version which has the catergories

Product
Processor
Memory
Hard Drive
Graphics Card

But in the HTML I have

Shape
Sides
Colour
Score
In Stock

There is nowhere as far as i can see (although i may be wrong, because 99.9% of the time I am) to input the catergories into the html for the “mobile” view

[Beverleyh]

it only gets the data for the stacked tables from the css. it doesn’t get it from the html

Currently yes, but using data- attributes in the HTML would allow you to change that.

There is nowhere as far as i can see … to input the catergories into the html for the “mobile” view

You would use a data- attribute in the markup and then make use of the value of that data- attribute in the mobile CSS – as per this method here https://davidwalsh.name/css-content-attr http://codepen.io/anon/pen/qmdWmp

They can say whatever you want, and be different for each table, or set of cells within each table, because they’re individually defined in the markup.

[JZ]

I love you beverley!

It only bloody works!

The styling of the table looks a bit funny though.

If you look at the Best Bricklaying Trowel one for example you’ll see the text is all nice and small and it has a grey th bit

[Beverleyh]

I’m stuck on mobile for the next couple of days so can’t do a visual mobile/desktop comparison. The mobile view looks fine to me here – I’m not sure how you’d prefer it to look (what makes it look funny?). Can you describe? Or maybe provide a side-by-side mockup pic of how it currently looks vs how you want it to look?

[JZ]

https://i.imgur.com/xWs40N8.jpg <- css not right?

https://i.imgur.com/uNLvAWA.jpg <- table how it's supposed to look

the text i think i added extra css to make the font size smaller, but it should have the th bit grey and the rest white.

[Beverleyh]

Looks like the rows alternate between a grey and white background (grey = odds, white = evens). You can achieve that with this method https://css-tricks.com/snippets/css/css3-zebra-striping-a-table/

EDIT: You should refer back to the CodePens because they already do this (using “even” rather than “odd”). The developer console will help you to inspect the CSS on your live website and replace any CSS that may have been accidentally omitted or overwritten – that’s F12 in most browsers.

Alternatively, if you just want to target the top row with a #eee background, please refer to the CodePen CSS that used the thead selector and add/correct that in your live site’s stylesheet.

[Atelierbram]

@jz the code Beverleyh is referring to is there on the “best-bricklaying-trowel”-page

.responsiveblt-stacked-table tr:nth-child(even) {
  background: #f5f5f5;
}

Don’t know what you did to override this … maybe post a link to this page?

[Author]

Posts