Support » Plugin: TablePress » Vertical/column lines only

  • Resolved desci

    (@desci)


    Hello,

    I’d like to add/have vertical lines between columns only. All other borders/lines in the table should be removed. Is this possible? Thank you!

Viewing 11 replies - 16 through 26 (of 26 total)
  • Alternatively, can I shade just a group of cells? If so, how?

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    how about this?:

    .tablepress-id-175 tbody td:last-child {
    	border-right: 1px solid #000000 !important;
    }
    .tablepress-id-175 tbody .row-2 td,
    .tablepress-id-175 tbody .row-7 td,
    .tablepress-id-175 tbody .row-12 td,
    .tablepress-id-175 tbody .row-15 td,
    .tablepress-id-175 tbody {
    	border-bottom: 1px solid #000000 !important;
    }
    .tablepress-id-175 tbody .row-7 td,
    .tablepress-id-175 tbody .row-12 td {
    	border-top: 1px solid #000000 !important;
    }

    For shading you would have to set a background color for an individual cell, like

    .tablepress-id-175 tbody .row-7 .column-1,
    .tablepress-id-175 tbody .row-12 .column-1 {
    	background-color: #cccccc;
    }

    A side note: To prevent other issues, please uncheck the “Use DataTables” checkbox on the “Edit” screen of this table.

    Regards,
    Tobias

    Tobias,
    I’m trying to add just a vertical line between two columns (to better separate them). I used the code you gave above but I still am not getting the vertical line between my two columns. http://flalhfa.com/2017-conference-sponsors

    CSS I added:

    .tablepress-id-123 thead th,
    .tablepress-id-123 tbody td {
    border-top: none;
    border-bottom: none;
    border-left: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
    }
    .tablepress-id-123 thead th:first-child,
    .tablepress-id-123 tbody td:first-child {
    border-left: none;
    }
    .tablepress-id-123 thead th:last-child,
    .tablepress-id-123 tbody td:last-child {
    border-right: none;
    }

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    you need to adjust the table ID in this code. Instead of 123, you need to use 2 (six times, in total).

    Regards,
    Tobias

    Tobias, That fixed it for the first table on that page but not the others. (Each level of sponsorship is a separate table). Ideas on how to fix it?

    Nancy

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    you would now have to copy the code for every table on that page, adjusting the table ID in the CSS code every time.

    The current code only applies to table 2, so duplicate that code and change the ID in the second copy to 3, and so on.

    Regards,
    Tobias

    Thank you. That did it.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    great! Thanks for the confirmation!

    Best wishes,
    Tobias

    Hi There,

    I need some help to add a vertical line in a specific table I have on my website to create separation for 2 columns.

    Can you kindly assist me on how to do this?

    Sorry this is the link and its my pricing table that I want to add a verticle line between the membership pricing and the RECOVERY CENTER descriptions

    https://www.nirvanastrengthbali.com/nirvana-strength-bali-fitness-class-pricing/

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your question, and sorry for the trouble.

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

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

    Regards,
    Tobias

Viewing 11 replies - 16 through 26 (of 26 total)
  • The topic ‘Vertical/column lines only’ is closed to new replies.