WordPress.org

Support

Support » Plugins and Hacks » [Resolved] creating vertical line between columns

[Resolved] creating vertical line between columns

  • 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/

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

    @tobiasbg

    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

    Thank you that answers it

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

    Plugin Author TobiasBg

    @tobiasbg

    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

    Thank you Tobias,

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

    Plugin Author TobiasBg

    @tobiasbg

    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

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘[Resolved] creating vertical line between columns’ is closed to new replies.