Trying to fix CSS tables problem

[dpd1]

I've been trying to import existing tables from a site into a shopify theme, but Shopify is fighting me. I'm not a CSS expert by any means. No matter what the html is in the table, the Shopify code seems to insist on making all column widths equal. So in other words... If you have 4 columns, and three of them have just four characters, and the fourth has 50... It will leave a huge amount of space in the 3 columns with just 4 characters, and wrap the text in the fourth. Stupid. Here's all the CSS table code for the theme in shopify...

table { border-collapse: collapse; border-spacing: 0; min-width: 50%; }

table.full { width: 100%; margin-bottom: $gutter/2; }

th { font-weight: $baseFontBoldWeight; }

th, td { text-align: left; padding: $gutter/6; border: 1px solid $colorBorder; }

The padding was originally 2. I changed it to 6 which helped. But the code still insists on making all the columns an even width. I assume one of these CSS tags is telling it to do that, since no html tags seem to override it. Anybody know?

[Dimitri]

What happens if you put "width:auto;" in the td definition ?

[lucy24]

This sounds like one of those things that is up to the whim of the individual browser. Check in a few different browsers, preferably using different rendering engines (MSIE : FF : anything webkit) to confirm.

Is it always the same column that has a lot more text than the others? If so, you could do something like
table.classname td:last-child {width: 50%;}
to force an override. In some situations it may work better to assign the forced width to the relevant th, and then all the following cells will follow suit, whether they like it or not. Another thing to try, possibly in combination with the preceding, is
table.classname {table-layout: fixed;}
The default table-layout is "auto", under which cell widths are determined by what's in them--and browsers have a lot of leeway about what takes precedence when there's a lot of variety in cell content.

Incidentally, border-spacing is only meaningful when collapse is set to “separate”. Otherwise there is, by definition, no spacing.

[not2easy]

Problem is that td { width: auto; } is the default behavior if no width is specified. It will follow the width established by the th element. I would try a longer th content to naturally fit the column that needs more room. In other words, if the column width for say, "Number of Inches Width" is too wide, use "Width" as the header. If the "Product" column is too narrow, use "Name of this Product" as the th content.

IF that makes no difference, there is somewhere in their backend that sets td width or assigns some column width to "td". It is not unusual to set up templates for services that are not user adjustable. You may need to ask Shopify CS for help.

[dpd1]

Thanks for the help. Tried the 'auto' tag and no change. Tried different browsers... All looked the same. Haven't tried the classname tag yet. Could this be some stupid system wide thing associated with the mobile friendly stuff? btw... Inserting a table using their own tools does the same thing. In fact, the width constraint is so strict that if you put enough characters in one column without a space, the line of characters will actually bug out and extend outside the table frame, rather than wrap or just push the other columns that have free space left, in further. I looked at a couple other themes and it was the same way. Seems like they really want it to work this way for some bizarre reason. That's why I wonder if it's a mobile thing.

[Dimitri]

Is it mandatory to use tables ? Can't you use flex for example ?

[dpd1]

Yes not2easy, I'm thinking your second comment might be the case. Seems like for some reason they want to force it to do this system-wide. Probably for the dumb mobile stuff. This is why I dreaded having to use a service like this, but the other positives are too good to resist anymore. It just sucks because I have a ton of table heavy content that drew a lot of people into my site. I could just use a screen grab of it all and be done with it, but I don't know how much of a hit the SEO will take with the text removed.

[dpd1]

Thanks for the help. I think I've decided to just break down and re-do the info as basic text. Probably take me less time to do that than figure this out. Plus, it will work better on mobile.

[NickMNS]

You can try setting the width using "!important" to override any other settings that are set somewhere above in the hierarchy.