WordPress.org

Forums

TablePress
[resolved] CSS Question - Table Borders (17 posts)

  1. Sevenhelmets
    Member
    Posted 1 year ago #

    Hi there

    I've tried to search the help for this, but haven't been able to find an answer to this.

    I would like to exclude borders for particular cells, rows or columns in a given table. For other cells/rows/columns, I'd like the border to remain.

    I have already added

    .tablepress,
    .tablepress tr,
    .tablepress tbody td,
    .tablepress thead th,
    .tablepress tfoot th {
    	border: 1px solid black;
    }

    to the "Custom CSS" field, but I'm not sure what I should put in the respective table's "Extra CSS Classes" field to indicate which cell(s) or row(s) or column(s) to exclude the border.

    The site/page in question can be viewed here: http://iyescorp.com/cost/

    Any help would be much appreciated! Thanks!

    https://wordpress.org/plugins/tablepress/

  2. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for your post, and sorry for the trouble.

    The "Extra CSS classes" field is not relevant for this, as it only allows adding CSS classes to tables, but not to cells.

    Instead, you will need to use the approach outlined in the TablePress FAQ entry at http://tablepress.org/faq/highlight-cells-or-content/
    Instead of changing the background color, as in that example, you'll want to change the border-left, border-right, border-top, and border-bottom CSS properties as necessary.

    Regards,
    Tobias

  3. Sevenhelmets
    Member
    Posted 1 year ago #

    Wow, what a speedy response - thanks!

    Now I have a bit of a problem.

    I actually want the border on the other tables on the site, so in my custom CSS I've written:

    .tablepress,
    .tablepress tr,
    .tablepress tbody td,
    .tablepress thead th,
    .tablepress tfoot th {
    	border: 1px solid black;
    }

    This over-rides the minor changes you suggest above.

    Is there a way to make sure the 'minor' changes (ie no border on particular cells and rows) overrides the primary code?

    Or do I have to specify border code for each and every table on the site?

    I guess the final question is, if I want to specify no border for an entire row or entire column, how do I do that?

    Sorry for all the questions! I really appreciate the help!

  4. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    just keep that CSS and put the CSS that changes/removes the borders from individual cells below it.
    Then, depending on whether you want to remove the border only in certain tables, either use the CSS selector .tablepress-id-123 (where 123 is the table ID), or use .tablepress to make that piece of code affect all tables.

    With that, it should actually be enough to use

    .tablepress tbody td,
    .tablepress thead th,
    .tablepress tfoot th {
    	border: 1px solid black;
    }

    to add a border to all cells.

    To remove the border for an entire row, you'd then have to remove all left and right borders from the cells, like

    .tablepress-id-123 .row-4 td {
      border-left: none;
      border-right: none;
    }

    For columns, it would be the bottom and top border, like

    .tablepress-id-123 .column-4 {
      border-top: none;
      border-bottom: none;
    }

    (Note that there's no td at the end of the selector for the columns.)

    Regards,
    Tobias

  5. Sevenhelmets
    Member
    Posted 1 year ago #

    Awesome, thanks for all your help Tobias!

    For anyone reading this in the future, I wanted to remove the external border lines as well, so my final code at the start (before all the code for removing borders on particular rows/columns etc) is:

    .tablepress {
    	width: auto;
    	margin: 1px;
    }
    
    .tablepress tbody td {
    	border: 1px solid black;
    }

    Issue solved - please close the topic!

  6. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    no problem, you are very welcome! :-) Good to hear that this helped!

    Best wishes,
    Tobias

  7. swordio
    Member
    Posted 1 year ago #

    Hi Tobias,
    I've actually gone through all the steps mentioned above, but to no avail. Here's the page in question.

    http://ashevillerealestateteam.com/about-us/scott-russell/

    The table is at the bottom of the page and has 3 graphics in it. Just wanting to remove the border. I wonder if I have 'Super-Strong' CSS?

  8. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for your post, and sorry for the trouble.

    It's not "super strong" CSS, but for some reason, your theme has an almost complete copy of the TablePress Default CSS in its "style.css" file, with slightly modified CSS selectors that results in the higher "aggressiveness".
    The easiest fix should therefore be to simply remove that entire block from the style.css (it starts with a comment for "WP Table"). That should remove possible points of interference and should make sure that the "Custom CSS" changes take effect.
    Another solution would be to change the priority of the CSS that removes the border, by appending !important after the CSS property value, like

    border: none !important;

    Regards,
    Tobias

  9. swordio
    Member
    Posted 1 year ago #

    Thanks, Tobias. Actually, I meant to say I tried all the steps here:

    http://tablepress.org/faq/remove-borders-from-a-table/

    Anyway, I just tried the change of priority option as you mentioned above...no luck. I'll try removing the block of code you mentioned. Thanks,
    Scott

  10. swordio
    Member
    Posted 1 year ago #

    Yep...that worked. Thanks!

  11. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    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!

  12. mickwaldrip
    Member
    Posted 11 months ago #

    Hi Tobias,

    Iʻm having a similar problem removing the outer border of a table here: http://www.fualeo.com/countries-languages/. Iʻve gone through every thread I can find on this, and tried each of the css suggestions. Here is the css I have in there now. Can you help?

    .tablepress-id-1 tr,
    .tablepress-id-1 td {
        border: none !important;
        padding: 0 !important;
    }

    Thanks,

    Aaron

  13. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    Hi,

    thanks for your post, and sorry for the trouble.

    Your theme is adding that border in a weird way, so that you'll need to use this "Custom CSS":

    .tablepress tbody,
    .tablepress td {
        border: none !important;
        padding: 0 !important;
    }

    Regards,
    Tobias

  14. mickwaldrip
    Member
    Posted 10 months ago #

    Thanks so much for the reply! I added that, and itʻs better, but now thereʻs a very thin white border. http://www.fualeo.com/our-partners/ it looks like some sort of margin or padding, but both of those are set to 0. So Iʻm not sure what to do.

    Thanks again for your help. Youʻre the most responsive developer Iʻve seen on here.

    Aloha,

    Aaron

  15. TobiasBg
    Member
    Plugin Author

    Posted 10 months ago #

    Hi Aaron,

    good to hear that this helped already! There's indeed a very thin white line below the table, and that seems to be a box shadow. To remove that, please also add

    .tablepress {
      box-shadow: none;
    }

    Regards,
    Tobias

  16. mickwaldrip
    Member
    Posted 10 months ago #

    Youʻre a lifesaver man. Thanks. Just rated you 5 stars.

    Aaron

  17. TobiasBg
    Member
    Plugin Author

    Posted 10 months ago #

    Hi,

    no problem, you are very welcome! :-) Good to hear that this helped!
    And thanks for the rating, I really appreciate it!

    Best wishes,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • TablePress
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags

No tags yet.