CSS Issue

Hi John,

I'm not sure how the comparison table is inserted/built in the first place but I would make sure the code for the both tables are the same.

If it works on one then it should work on the other.

it seems to work on http://testdmn.com/1/test/

this is the same as the punch bag table html and css

Something has to be different for the table to display differently.

Maybe try copy and paste the code that's working and replace the content to rebuild the table?

The two tables have different classes.

The one you like is: responsive8-stacked-table

The one you don't like is: responsivenew-stacked-table

Not sure if you're using a plugin for tables, but if you are then maybe you just need to choose the same style?

oh so if i change the one that doesn't work to responsive8 then it shouldn't matter should it because it has data content in the table?

I assume so. Where do those classes come from? A plugin? Or did you add them?

hmm i think i need to just have one class with data content. cos changing it to responsive8 has worked but when it's on mobile view the stackable tables titles are screwed up

I used this tutorial originally

http://alijafarian.com/responsive-html-tables/

Then i posted about it here

https://css-tricks.com/forums/topic/stackable-responsive-tables-html-css-problem-table-is-desktop-and-mobile/

Where they suggested putting the content in the HTML instead of the css

then i would only need one class.

my brother said this was probably the best way to go, but then my brother is trying to get me to use bootstrap instead of tables but i think that would complicate things lol

It looks like you got them looking the same? :)

Hi Tom, yeah i was very tired last night when i originally posted this and was falling asleep at my desk. I wasn't really thinking straight so went to bed about 9pm.

I figured, if I go to bed now I can work it out tomorrow when i'm fresh.

Well the solution came to me when i was lying in bed about 10pm just out of the blue....

I'd forgot to add the data-category="AAAA" to the <td> tags

so yeah it looks good now and when i add the data-category="AAAA" to the td tags that should mean it's resolved.

I really love this forum!

Hmm I just checked and the data-category="AAAA" are there in the <td> tags

I'm stumped then!

/* mobile view problem */

@media (max-width: 768px) {
    .inside-grid-column {
        margin-bottom: 0;
    }
}

Seems like i had 2 of these and i missed a } on part of my css

So everything is working now? :)

Hahahhahaahahah not quite

I tidied up the css so i just have 1 responsive whatnot and set all the tables to that

they all look ok with the grey top

from the tutorial it appears if i remove all the

	.responsive-stacked-table.with-mobile-labels td:nth-of-type(1):before {
		content: "Model:";

and use data-category="Model" in the <td> instead it should work?