Hi,
thanks for your question.
This is unfortunately not trivial, and my assumption is that you are kind of “mis-using” tables for visual purposes.
However, it is possible, but requires some CSS code.
Please take a look at the TablePress FAQ page at http://tablepress.org/faq/ where you can find the CSS code to remove the borders. Some similar code can then be used to add left and right borders to the cells again, to make them appear as columns.
Round corners can also be achieved with CSS, by applying a border radius to the top left and top right cell of the header row cells:
.tablepress-id-123 thead th {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
To add some space between the columns, you’ll need to influence the border-spacing, e.g. with something like
.tablepress-id-123 {
border-collapse: separate;
border-spacing: 10px 0;
}
The table ID has to be adjusted in each case.
Regards,
Tobias
Hi Tobias,
I used the above solution and the table looks very good. In one of my tables I have 8 columns as 4 groups of 2 columns each. I would like to raise the border spacing between every second column so that to show more obvious the groups of columns.
Can you help me please with CSS code for raise the border spacing between two columns in a certain table?
Thanx in advance,
Robert
I am coming back with this issue. I would appreciate if you could help me out.
Thank you,
Robert
Hi Robert,
thanks for your post. I’m on vacation right now and therefore don’t have the time to answer right now. However, I promise to take a look in a few days!
Regards,
Tobias
Hi Tobias,
Thanks for the feedback, enjoy your vacation and send me your response whenever you can.
Cheers!
Robert
Hi,
thanks for your post, and sorry again for the late answer. As I was on vacation, I didn’t have a chance to reply earlier.
Can you please post a link to the page for the table where you want this? That would help in finding the correct and best code for this. Thanks!
Regards,
Tobias
Hy Tobias,
Thank for the concern. Here you have the page: https://www.theautoexperience.ro/indici-de-sarcina/
Use the password to acces it: “test”
Basically I want to have a bigger space (border spacing) only between columns 2 and 3.
Thanks,
Robert
P.S. In the meantime I changed the table layout and have 4 columns instead of 8, but the solution still needed.
Hi,
thanks for the link!
Unfortunately, I don’t see an easy or plain-CSS solution here. 🙁
The border-spacing CSS property, that we are using can only be used on a full table, but not on individual columns.
The best way here might therefore be to add an extra/empty third column to the table, that is made transparent, so that it appears as extra white space.
Regards,
Tobias
Hy,
Thanks for the solution 🙂 I will try it.
Regards,
Robert
I just inserted a column, but don’t know how to make it transparent. Need even the column header to be transparent (first row)
Robert
Hi,
can you activate the passwort again? “test” is not working…
Regards,
Tobias
Hi,
yes, it is, but there’s no new third column?!
Regards,
Tobias
It is now. Sorry, I thought that you will just send me a CSS code to make a certain column invisible.
I tried to set the column width to 5 pixel but I believe there is an inferior limit under below we cannot set, because it didn’t make it that size.
Regards,
Robert
Hi,
yes, I will tell you the CSS, but if I can test it directly, that makes things more reliable 🙂
So, here’s the necessary “Custom CSS”:
.tablepress-id-9 .column-3 {
background: none !important;
border: none;
padding: 0 3px;
}
Additionally, please add this to the “Custom Commands” textfield on the “Edit” screen of the table (to remove the sorting arrows):
"aoColumnDefs": [ { "bSortable": false, "aTargets": [ 2 ] } ]
By modifying the second value for padding, you can modify the width of the third column.
Regards,
Tobias
