WordPress.org

Ready to get started?Download WordPress

Forums

TablePress
[resolved] Remove Table Borders (25 posts)

  1. ajetal
    Member
    Posted 1 year ago #

    Saw in FAQ's the code to be inserted into plugin options to eliminate table borders and did so. Wanted to eliminate all borders in the table on the following page but only the interior, vertical borders were eliminated:

    Parts Page

    In case it matters, I have inserted some other code into plugin options to influence table on this page also(although not to eliminate borders):

    Equipment Page

    Thanks so much...

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

  2. Yael K. Miller
    Member
    Posted 1 year ago #

    The answer's at http://tablepress.org/faq/

  3. ajetal
    Member
    Posted 1 year ago #

    I followed the instructions to insert the indicated code and the result was that it removed the internal, vertical borders but not the outside borders nor the horizontal interior borders. I said as much in the original post. Is there something else I'm missing here?

  4. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for your question, and sorry for the trouble.

    Also thanks to Yael, for helping out with the FAQ link. Unfortunately, the solution from the FAQ is not enough in your case, as your theme's CSS is "stronger". So, we again need to be "stronger" :-)

    Please try again with

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

    Regards,
    Tobias

  5. ajetal
    Member
    Posted 1 year ago #

    Thanks, everyone....problem solved!!!

  6. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    awesome! Great to hear that. Thanks for the confirmation!

    Best wishes,
    Tobias

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

  7. Simargentina
    Member
    Posted 1 year ago #

    I have the same problem. Don't know if my theme CSS is very strong...

    I've tried with this code, but it doesn't work.

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

    I'd also like to reduce the padding, but same, it doesn't work. Nothing happens:

    .tablepress-id-1 .column-2 {
    	padding: 1px;
    }
  8. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for your question. You are right, your theme CSS is very "strong", so that the "Custom CSS" has to be modified a little bit.
    The code that you posted (with #content prepended in each line) does work nicely (You are currently using that with the #content).

    The same will work for the padding. Please try

    #content .tablepress-id-1 .column-2 {
    	padding: 1px;
    }

    Regards,
    Tobias

  9. Simargentina
    Member
    Posted 1 year ago #

    Thank you very much!! Nice!!

    Sorry for the first code, i hadn't see that there was the "#content" part now.

    Nice job Tobias! :)

  10. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    great to see that it worked! :-)
    And no problem, you are very welcome!

    Best wishes,
    Tobias

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

  11. BioNet54
    Member
    Posted 5 months ago #

    Hi Tobias,,

    I tried both #content and #main, but both didn't work. I couldn't remove the border.

    Any suggestions?
    cookware.us homepage

  12. TobiasBg
    Member
    Plugin Author

    Posted 5 months ago #

    Hi,

    thanks for your post, and sorry for the trouble.

    Yeah, in your case, the borders come from something else: The theme is separating the cells by one pixel, so that what you see is a backgroud color of the table layer (that is otherwise invisible behind the cells).
    So, please remove that #main again and use the standard code for removing borders from the FAQ, and additionally add this "Custom CSS":

    .tablepress {
        border-collapse: collapse !important;
    }

    Regards,
    Tobias

  13. BioNet54
    Member
    Posted 5 months ago #

    Working like a boss!
    Thank Tobias :)

  14. TobiasBg
    Member
    Plugin Author

    Posted 5 months 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!

  15. BioNet54
    Member
    Posted 5 months ago #

    $10 from me. Big help.

  16. TobiasBg
    Member
    Plugin Author

    Posted 5 months ago #

    Hi,

    thank you very much, I really appreciate that! :-)

    Best wishes,
    Tobias

  17. Semanticfield
    Member
    Posted 5 months ago #

    Hi Tobias,

    How can I put all these CSS codes together?

    .tablepress-id-4 .row-hover tr:hover td {
    	background-color: #ffffff;
    }
    .tablepress-id-5 .row-hover tr:hover td {
    	background-color: #ffffff;
    }
    .tablepress-id-6 .row-hover tr:hover td {
    	background-color: #ffffff;
    }
    .tablepress-id-7 .row-hover tr:hover td {
    	background-color: #ffffff;
    }
    .tablepress-id-8 .row-hover tr:hover td {
    	background-color: #ffffff;
    }
    .tablepress-id-9 .row-hover tr:hover td {
    	background-color: #ffffff;
    }
    .tablepress-id-10 .row-hover tr:hover td {
    	background-color: #ffffff;
    }
    .tablepress-id-11 .row-hover tr:hover td {
    	background-color: #ffffff;
    }

    I want them to look like this:

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

    Another question:

    If it's difficult to merge cells in TablePress. Can we show or hide a specific border (up, down, left, right) of a specific cell of a specific table?

  18. TobiasBg
    Member
    Plugin Author

    Posted 5 months ago #

    Hi,

    thanks for your question.

    To merge those CSS selectors, you can write them as

    .tablepress-id-4 .row-hover tr:hover td,
    .tablepress-id-5 .row-hover tr:hover td,
    .tablepress-id-6 .row-hover tr:hover td,
    .tablepress-id-7 .row-hover tr:hover td,
    .tablepress-id-8 .row-hover tr:hover td,
    .tablepress-id-9 .row-hover tr:hover td,
    .tablepress-id-10 .row-hover tr:hover td,
    .tablepress-id-11 .row-hover tr:hover td {
    	background-color: #ffffff;
    }

    If however you want to change this for ALL TablePress tables at once, you can simply use

    .tablepress .row-hover tr:hover td {
    	background-color: #ffffff;
    }

    And if you don't actually want that hover effect (i.e. if your default table color is already white), just uncheck the "Row Highlighting" checkbox on each table's "Edit" screen.

    For your other question: Merging cells is possible with "colspan" and "rowspan" buttons below each table's input fields. You could also hide indivdual borders with some CSS like

    #content .tablepress-id-4 .row-5 .column-3 {
    	border-right: none;
    }

    Regards,
    Tobias

  19. TobiasBg
    Member
    Plugin Author

    Posted 5 months ago #

    Hi,

    thanks for your question.

    To merge those CSS selectors, you can write them as

    .tablepress-id-4 .row-hover tr:hover td,
    .tablepress-id-5 .row-hover tr:hover td,
    .tablepress-id-6 .row-hover tr:hover td,
    .tablepress-id-7 .row-hover tr:hover td,
    .tablepress-id-8 .row-hover tr:hover td,
    .tablepress-id-9 .row-hover tr:hover td,
    .tablepress-id-10 .row-hover tr:hover td,
    .tablepress-id-11 .row-hover tr:hover td {
    	background-color: #ffffff;
    }

    If however you want to change this for ALL TablePress tables at once, you can simply use

    .tablepress .row-hover tr:hover td {
    	background-color: #ffffff;
    }

    And if you don't actually want that hover effect (i.e. if your default table color is already white), just uncheck the "Row Highlighting" checkbox on each table's "Edit" screen.

    For your other question: Merging cells is possible with "colspan" and "rowspan" buttons below each table's input fields. You could also hide indivdual borders with some CSS like

    #content .tablepress-id-4 .row-5 .column-3 {
    	border-right: none;
    }

    Regards,
    Tobias

  20. Semanticfield
    Member
    Posted 5 months ago #

    Thanks Tobias,

    #content .tablepress-id-4 .row-5 .column-3 {
    	border-right(or top, bottom,left): none;
    }

    don't seem to work. I had to change "none" to "white" or the page background color to make it look what I wanted it to look.

    The CSS merge selectors technique worked well, thanks!

    And if I may make a suggestion, how do you think if we can align consecutive tables together to achieve the bottom border of the upper table is also the top border of the lower table; and the right border of the upper table is also the left border of the lower table?

    Thanks for the great plugin!

  21. pbecker3
    Member
    Posted 5 months ago #

    Hi,
    Checked through CustomCSS for .tablepress-id-N to put my table number in and don't find it.
    Didn't find anything labled "Plugin Options" for the textarea either.
    Think I'm in the right place. Haven't done much of this work inside and don't know what I'm looking for or where I'm supposed to put the instructions.
    Thank you for your patience and instructions.
    Pat

  22. TobiasBg
    Member
    Plugin Author

    Posted 5 months ago #

    Hi,

    @Semanticfield:
    Good to hear that this helped!
    About putting those tables next to each other: That's kind of tricky, actually. You'd have to move the tables next to each other with some CSS code and then also remove the margin and padding between them.

    @pbecker3:
    This appies to the TablePress plugin, so you'll need to go to the "TablePress" entry in the admin menu. There, you'll see a tab labeled "Plugin Options" at the top. Click that and on the page that opens, you'll see a big textarea that is named "Custom CSS".
    That's where the "Custom CSS" (for example that that I posted above) goes.

    Regards,
    Tobias

  23. pbecker3
    Member
    Posted 5 months ago #

    Bravo,
    Thanks Tobias
    Just had to find the right spot to put the code and I'm off to the races again. The table looks great now.
    Warm regards,
    Pat

  24. Semanticfield
    Member
    Posted 5 months ago #

    Thanks for the help Tobias.

    Regards,
    Semanticfield

  25. TobiasBg
    Member
    Plugin Author

    Posted 5 months 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!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic