Borders unvisible
-
On my page the borders aren’t visable. I guess it is because it is inside a html code. But i have no clue how to make them visable again, anyone any idea?
The page I need help with: [log in to see the link]
-
Hi,
thanks for your post, and sorry for the trouble.
The reason for this is that your theme sets a transparent border color here, for some reason. To override that, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:
.tablepress>*+tbody>*>*, .tablepress>tbody>*~*>*, .tablepress>tfoot>*>* { border-top: 1px solid var(--border-color) !important; }
Regards,
TobiasThank you for your help! It worked! Now i’m looking for a solution to say that the 1st row is 10px than text and again 10px. Is this possible?
Hi,
do you mean a 10px border? Or more space/separation between the rows?
Regards,
TobiasI mean a 10px border
Hi,
for that, just try changing that
1px
in that CSS code to10px
πRegards,
TobiasThat changes the grey lines above the koloms.
I want that the second row starts after 10px of the 1st kolom.Hi,
so you want more space between the border lines and the text? Then, instead also add this inside that CSS code:
padding-top: 10px; padding-bottom: 10px;
Regards,
TobiasThat didn’t work.
Just to be sure u understand me correct ( My english is not always the best ) i uploaded an image for you.
https://werkgroepwolf.nl/wp-content/uploads/2023/05/Screenshot_127.pngHi,
ah, thanks for the clarification. So you are talking about the columns actually. Here, you would need to set columns widths then, e.g. via https://tablepress.org/faq/column-widths/
However, there will still be problems with the yellow header row. These are a consequence of using Horizontal Scrolling and having the tables in these hidden/expandable sections. You might get around this by also using the
!important
flag in the CSS code for the widths here. Alternatively, it might be a good idea to use a different implementation of Horizontal Scrolling that is not affected by this problem, and which is available as part of the Responsive Tables feature module of the TablePress premium versions.Regards,
TobiasI dont get it to work. If i add the follow lines, it doesnt change anything:
Im looking at the right id, but its still the same.
.tablepress-id-1 .column-1 {
padding: 4px;
}Hi,
that CSS would change the padding. You’ll need the first piece of code from that FAQ entry, to set the width.
Regards,
TobiasSo this:
.tablepress-id-1 .column-1 {
width: 10px;
}
Or this:
.tablepress-id-1 .column-2 {
width: 10px;
}
Should change something but it doesn’t.Hi,
setting the same small width for both columns won’t work, as they will then just stretch to 50% of the width. And it might actually be worthwhile to change the padding as well, as your theme is setting a quite large padding. Please try this “Custom CSS”:
.tablepress th, .tablepress td { padding: 8px !important; } h6 .tablepress .column-1 { width: 20%; } h6 .tablepress .column-2 { width: 80%; }
This should even adjust all these tables at once, as it targets them by referencing the wrapper element
h6
in the HTML code. (By the way, this is not a good choice, in my opinion, ash6
should be used for headings, according to its semantics, but not as a wrapper for other page elements, like tables and similar.)Regards,
TobiasUsing inportant doesnt work either
.tablepress-id-1 .column-1 {
width: 10px !important;
}It worked!
.tablepress th, .tablepress td { padding: 8px !important; } h6 .tablepress .column-1 { width: 20%; } h6 .tablepress .column-2 { width: 80%; }
- The topic ‘Borders unvisible’ is closed to new replies.