WordPress.org

Ready to get started?Download WordPress

Forums

TablePress
[resolved] creating vertical line between columns (6 posts)

  1. Johnson Mark
    Member
    Posted 1 year ago #

    Theme is Adventure Journal

    I have a 2 column table

    question 1. Can I just have a vertical line only between the 2 columns
    question 2. Can O thicken or change that vertical line

    .tablepress-id-1,
    .tablepress-id-1 tr,
    .tablepress-id-1 tbody td,
    .tablepress-id-1 thead th,
    .tablepress-id-1 tfoot th {
    border: 1px solid #000000;
    }

    I have rated 5 stars great plugin

    Thank you

    Mark

    http://wordpress.org/extend/plugins/tablepress/

  2. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Mark,

    thanks for your question.

    To add a border between the first and second column only, please try this "Custom CSS" code:

    .tablepress-id-1 .column-1 {
        border-right: 2px solid #000000;
    }

    You can adjust the width and color of that border by simply adjusting that parameter value.

    Regards,
    Tobias

  3. Johnson Mark
    Member
    Posted 1 year ago #

    Thank you that answers it

    Can I make this border something other than a line, like a graphic

  4. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    good to hear that this helped!

    Making this an image is not directly possible. For that, you could create a new column between the existing ones and play around with a background image, that you make very narrow.

    Regards,
    Tobias

  5. Johnson Mark
    Member
    Posted 1 year ago #

    Thank you Tobias,

    How would I
    Turn off the row lines and
    insert a graphic into the entire column?

  6. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Mark,

    to turn off the border for the rows, you can use similar code as you are already using it above:

    .tablepress-id-1,
    .tablepress-id-1 tr,
    .tablepress-id-1 tbody td,
    .tablepress-id-1 thead th,
    .tablepress-id-1 tfoot th {
      border: none;
    }

    This should go before the CSS for adding that vertical border between the two columns (if you want to keep that).

    Now, using a graphic in an entire column is not so trivial. Maybe I was a little quick with that suggestion... The problem is that there's no CSS selector to target an entire column (because there's no HTML element for an entire column). You will therefore actually have to apply that graphic as the background image of the entire table, with

    .tablepress-id-1 {
      background: url(http://example.com/image.png) no-repeat center top;
    }

    Additionally, the background colors of the rows and cells must be made transparent. This is usually the default, but sometimes you might have to force it with:

    .tablepress-id-1 tr,
    .tablepress-id-1 td {
      background-color: transparent !important;
    }

    Regards,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic