- This topic is empty.
April 15, 2017 at 3:53 am #253770
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??April 15, 2017 at 4:23 am #253771
Have a look into using the value of a
data-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-attrApril 15, 2017 at 4:33 am #253772
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”
That’s the link ^
If you see on this codepen preview thingy, it shows the mobile version which has the catergories
But in the HTML I have
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” viewApril 15, 2017 at 6:24 am #253782
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.April 15, 2017 at 7:59 am #253788
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 bitApril 15, 2017 at 3:17 pm #253790
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?April 17, 2017 at 4:43 am #253843April 17, 2017 at 6:02 am #253853
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
theadselector and add/correct that in your live site’s stylesheet.April 17, 2017 at 6:20 am #253854
- The forum ‘Design’ is closed to new topics and replies.