• Resolved tigertjheu

    (@tigertjheu)


    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]

Viewing 15 replies - 1 through 15 (of 24 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    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,
    Tobias

    Thread Starter tigertjheu

    (@tigertjheu)

    Thank 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?

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    do you mean a 10px border? Or more space/separation between the rows?

    Regards,
    Tobias

    Thread Starter tigertjheu

    (@tigertjheu)

    I mean a 10px border

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    for that, just try changing that 1px in that CSS code to 10px 🙂

    Regards,
    Tobias

    Thread Starter tigertjheu

    (@tigertjheu)

    That changes the grey lines above the koloms.
    I want that the second row starts after 10px of the 1st kolom.

    Plugin Author TobiasBg

    (@tobiasbg)

    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,
    Tobias

    Thread Starter tigertjheu

    (@tigertjheu)

    That 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.png

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    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,
    Tobias

    Thread Starter tigertjheu

    (@tigertjheu)

    I 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;
    }

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    that CSS would change the padding. You’ll need the first piece of code from that FAQ entry, to set the width.

    Regards,
    Tobias

    Thread Starter tigertjheu

    (@tigertjheu)

    So this:
    .tablepress-id-1 .column-1 {
    width: 10px;
    }

    Or this:
    .tablepress-id-1 .column-2 {
    width: 10px;
    }

    Should change something but it doesn’t.

    Plugin Author TobiasBg

    (@tobiasbg)

    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, as h6 should be used for headings, according to its semantics, but not as a wrapper for other page elements, like tables and similar.)

    Regards,
    Tobias

    Thread Starter tigertjheu

    (@tigertjheu)

    Using inportant doesnt work either

    .tablepress-id-1 .column-1 {
    width: 10px !important;
    }

    Thread Starter tigertjheu

    (@tigertjheu)

    It worked!


    .tablepress th, .tablepress td { padding: 8px !important; } h6 .tablepress .column-1 { width: 20%; } h6 .tablepress .column-2 { width: 80%; }

Viewing 15 replies - 1 through 15 (of 24 total)
  • The topic ‘Borders unvisible’ is closed to new replies.