Hi,
thanks for your question, and sorry for the trouble.
Indeed, your theme is slightly influencing the width of the tables.
To change that, you’ll need to be more strict with setting the auto width:
.tablepress-id-1 {
width: auto !important;
}
After that, you can set the column widths as explained in the TablePress FAQ.
Additionally, please shorten this CSS
.tablepress .column-1 {
padding: 4px;
}
.tablepress .column-2 {
padding: 4px;
}
.tablepress .column-3 {
padding: 4px;
}
to
.tablepress th,
.tablepress td {
padding: 4px;
}
which is more flexible and robust.
Regards,
Tobias
Thread Starter
Diana
(@dianasunvillaeu)
You are my HERO! Thank you so much! I have never received an answer so quickly even when I paid for it. I will vote for the plugin and buy you a coffee!
One more (probably obvious) question: if I were to change
.tablepress th,
.tablepress td {
padding: 4px;
}
to
.tablepress th,
.tablepress td {
width: 100px;
}
it would make all my columns 100px wide, right?
And I could do the same for the rows?
Thanks again,
Diana
Hi Diana,
no problem, you are very welcome! 🙂 And thanks for wanting to donate rate the plugin. I really appreciate it!
Yes, that mentioned code would make all columns in all TablePress tables 100px wide (unless the content requires a bigger width).
I wouldn’t really recommend this though, unless you know that ALL tables that you create are of the same structure and should get the same width. It’s usually better to set the column widths of the tables individually, with something like
.tablepress-id-123 .column-1 {
width: 200px;
}
.tablepress-id-123 .column-2 {
width: 300px;
}
.tablepress-id-456 .column-1 {
width: 100px;
}
.tablepress-id-456 .column-2 {
width: 150px;
}
About the last question with the rows: I’m not sure I understand. The width of the the rows is the same as the table’s width, so you would set that with
.tablepress-id-123 {
width: 600px !important;
}
(due to the theme, we need that !important here).
Regards,
Tobias
Thread Starter
Diana
(@dianasunvillaeu)
Sorry, I meant the height of the row….
Hi,
yes, for the height, this should work in the same way, just with height instead of width as the property.
It might however be better to change the vertical padding, i.e. to use something like.
.tablepress-id-123 th,
.tablepress-id-123 td {
padding: 4px 20px 4px 20px;
}
This would set a top and bottom padding of 20px, but keep the left and right padding of 4px.
Regards,
Tobias
Thread Starter
Diana
(@dianasunvillaeu)
Put that in and really liked the look, so I made that my standard in plugin options because my tables will be a lot of the same.. so I just copy and change some numbers and add this second table to the page, guess what: only the first table shows the way I want it, the others are all filling up the whole page width again. I must be doing something wrong, but do not have a clue what, I am hoping you do!
http://test.sophieblom.com/2-bedrooms/jardines-de-denia-iv/
Thanks (again..)
Diana
Hi Diana,
the current code to change the width only influences table 1. Note the “-id-1” part in the code
.tablepress-id-1 {
width: auto !important;
}
To have this apply to the other tables on the page as well, just extend the code to this:
.tablepress-id-1,
.tablepress-id-3,
.tablepress-id-4 {
width: auto !important;
}
Regards,
Tobias
Thread Starter
Diana
(@dianasunvillaeu)
Thank you Tobias, you are a gem in this world of noob haters, I know this is all so obvious to you and you just reply kindly to all questions. I am browsing FAQ´s and forums and I do not dare to post a request for support when I read through the nasty comments of plugin makers. But I have found my table plugin and will now continue my search for a form builder made by someone who is patient with the ignorant!
Best wishes,
Diana
Hi Diana,
no problem, you are very welcome! Thanks for the nice words!
Sorry to hear that you’ve had such a bad experience with other WordPress plugin developers. 🙁
Best wishes,
Tobias
