Tables do not work for my store. I am using the Superstore theme. I have tried just about every css snippet and it’s still doing 2 things incorrectly. 1. it’s not showing any borders.. 2. it’s non responsive on mobile(which is the bigger problem) please help this is a nightmare!!!
take a look at this example here. you have to go under the tab “technical specifications”
Hi @hollyt888
Something like this might look OK - but really you’d need to talk to the theme creators to see why it’s not functioning at the top level.
Adding these lines to the very bottom of your theme.css file should get some borders and appropriate cell background colours on:
td.wptb-cell {
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
padding: 0.5em;
vertical-align: middle;
}
td.wptb-cell:first-child {
background: #223c60;
color: white
}
tr.wptb-row {
vertical-align: middle;
}
.easytabs-container .easytabs-content-holder p:last-child {
margin-top: 0.8em;
margin-bottom: 0.8em;
}
But that won’t work still for tables like these: https://everbluepond.com/collections/decorative-fountains-1/products/scott-aerator-gusher-fountain
The bigger problem is that it’s not adapting to mobile. How can I make it do that? Thank you!
Hi @hollyt888
That’s a huge table that will take some complex thought on getting your points across on mobile.
How would you like it to appear on mobile?
Theoretically, this CSS will get it to appear more like a traditional table on mobile - but evidently it won’t look good for a table this size, as there’s just not enough space to fit those columns in.
@media screen and (max-width: 719px) {
.rte td {
display: table-cell;
width: 100%;
}
}
And I’m not entirely sure what’s going on with the utility classes on those dropdowns but it seems like a huge overkill for what you’re actually trying to achieve - are you using an app to create these dropdowns/tables?
I tried that code and it does’t even work correctly for the 2 column tables. Here is another website that has the columns done right, this is what im trying to achieve. look under Tech Specs https://www.thepondguy.com/product/power-house-high-volume-surface-aerators/
thank you so much for your help!
Hi @hollyt888
Ok so something like this will kind of emulate the other site you linked to - but it won’t be perfect.
There’s app code battling with any CSS we plug in, lots of bloated HTML generated etc. so it’s not that easy doing it from the frontend.
But try this one which should give you the sort of effect you’re looking for - you might want to edit the minimum width per page depending on the number of columns, but that’s another problem.
.product-description .easytabs-container .easytabs-contents .easytabs-content-holder {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.product-description .easytabs-container .easytabs-contents .easytabs-content-holder table {
display: table;
table-layout: fixed;
width: 100%;
min-width: 600px;
}
.product-description .easytabs-container .easytabs-contents .easytabs-content-holder table tr {
display: table-row;
}
.product-description .easytabs-container .easytabs-contents .easytabs-content-holder table tr td {
border: 1px solid #c4c4c4;
padding: 0.45rem;
display: table-cell;
}
where do I add that code?
Hi @hollyt888
If you add the code to the bottom of your assets/theme.css file.
You should be able to use the theme code editor to do this.
Just return a new line at the very bottom of the file and paste in what I’ve sent you - then save.