Hi,
ah, I actually wanted to add !important above as well, i.e.
.tablepress th,
.tablepress td {
padding: 8px !important;
}
h6 .tablepress .column-1 {
width: 20% !important;
}
h6 .tablepress .column-2 {
width: 80% !important;
}
Please also make sure to flush the cache of your optimization plugin. It looks like that’s caching CSS files, so that your changes might not be even be used.
Regards,
Tobias
Hi,
ah, great that it worked now 🙂
Best wishes,
Tobias
P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!
After playing a little bit further the problem with the orange bar (header) is almost solved. On the pc it is empty so it isn’t showing, on mobile devices there is a orange bar but not disturbing.
The only thing i’m looking for is to make it wider, in stead of 20/80% i would make it 20/180%, Now a website is on 2 rows. Any idea how to solve it?
Hi,
you could also hide that orange table header entirely:
h6 .tablepress thead {
display: none;
}
As for the 20%/180%: That doesn’t make sense, as the sum must be 100%. So, you could try 10% and 90% here. However, I don’t really understand “Now a website is on 2 rows”. What do you mean by that?
Regards,
Tobias
Thank you! This worked perfectly!
With the 180% i mean, an sentence gets on more lines than neccecary.
I’ve uploaded an image to show what i mean.: https://werkgroepwolf.nl/wp-content/uploads/2023/05/picture235452432534.png
After trying a lot with ChatGPT i think i’ve found the solution, it took me 50 minutes arguing with the ai but after i thought i got this i found a working solution.
It kept giving me white-space normal or pre-wrap. After changing it to nowrap it worked. Ofcourse i am curious if this was the easiest solution.
@media screen and (max-width: 767px) {
.tablepress td:nth-child(2) {
white-space: nowrap;
word-wrap: break-word; /* hyphenate words longer than 80 characters / max-width: none; / make cell width not limited */
}
}
Hi,
thanks for the clarification. However, your screenshot already shows quite clearly that there’s not enough space for all text to fit into one line? So, what would you like to happen here then?
Your CSS code should introduce hyphenation in between words, and looks totally fine, if that’s what you were looking for 🙂
I would just recommend to add h6 in front of the .tablepress, so that this is only applied to the tables in these collapsable sections, and not to all TablePress tables on your site.
Regards,
Tobias
Thnx for all your help! It works great and i love how simpel it is!
Thank you!
Hi,
no problem, you are very welcome! 🙂 Good to hear that this helped!
Best wishes,
Tobias
P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!
