Outside Borders

  • Resolved Llessieur

    (@llessieur)


    4 years, 12 months ago

    I have areas of my table that are colored and I’d like a simple black border around the areas, not the individual rows. If you look at my page, you’ll see the first section consists of two columns and 6 rows. I’d like a black border around the outside of all of that, but am unsure how to do so. I have turned off the overall border by using the code you provided and that eliminated each row having a border. How do I add an outside border around each colored section? Thank you!

    The page I need help with: [log in to see the link]

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

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    For this, you could add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .tablepress-id-1 {
	border: 2px solid #000000 !important;
}
.tablepress-id-1 .row-7 td,
.tablepress-id-1 .row-13 td,
.tablepress-id-1 .row-19 td,
.tablepress-id-1 .row-25 td,
.tablepress-id-1 .row-31 td,
.tablepress-id-1 .row-37 td {
	border-top: 2px solid #000000 !important;
}
    Thread Starter Llessieur

    (@llessieur)

    Thank you so much!! This worked perfectly! I tried doing it by rows, but instead of just putting a box around the entire table, was trying to do it row by row and it was a mess. This is great – I can’t thank you enough!

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! ?? Good to hear that this helped!

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

    Thread Starter Llessieur

    (@llessieur)

    Hi,

    One other question – when I use #colspan# the outside border of the cell I put it in disappears. I’m trying to combine two columns in certain rows by using the #colspan# but I still need those outside borders you added via code (above) to show up. What am I not including?

    Thanks Tobias!

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    to fix that, please extend your CSS block

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

    to

    .tablepress-id-1 .column-3,
.tablepress-id-1 [colspan="3"] {
	border-right: 1px solid #000000 !important;
}

    Regards,
    Tobias

    Thread Starter Llessieur

    (@llessieur)

    Again, you are the best! Thanks so much!!

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    no problem! Always happy to help!

    Best wishes,
    Tobias

    Thread Starter Llessieur

    (@llessieur)

    Hi Tobias!

    Sorry, me again. For some reason, my table refuses to display full-width. I have limited the first column this way:
    .tablepress .column-1 {
    width: 100px;
    }

    But I can’t get the table to be responsive/full-width overall. I thought this was the default setting? Could I have changed it?

    Thanks!

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    the table is actually displaying at “full width” — it takes the full width of its parent container, as defined by the theme.
    You might have to select something like a “Full width” or “No sidebar” “Page Template” on the page’s “Edit” screen here. If the theme does not offer something like that, you’d have to modify the theme’s CSS, I’m afraid.

    Regards,
    Tobias

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

Tags