Support » Plugin: TablePress - Tables in WordPress made easy » Remove bottom border for 1 cell or column

  • Resolved Goodvalley

    (@goodvalley)


    Hi Tobias,

    your Tablepress plugin is really useful and so is the support you’re giving, it’s amazing…

    I have a question for you. I have a very simple table that works like kind of a menu, and I would like it not to show any border on the bottom of a specific cell.

    This is the entire .css code I’ve put on it:

    .tablepress-id-1 .row-1 .column-1 {
    	font-weight: bold;
    }
    
    .tablepress-id-1 .row-1 .column-1 {
    	background-color: #cccccc;
    }
    
    /* Change the hover individual cell color */
    .tablepress-id-1 .row-hover tr td:hover {
    	background-color: #cccccc !important;
    }
    
    /* Font color, except for the first column*/
    .tablepress-id-1 .row-1 td:not(.column-1) {
    	color: #184c76;
    }
    
    /*Border structure*/
    .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 #c9c9c9;
    }
    
    /*Removing the bottom border of a cell*/
    #content .tablepress-id-1 .row-1 .column-1 {
    	border-bottom: none;
    }

    I have a very poor experience on code and as far as I can see, the last part of it should be right, but my page/post keeps on showing me the bottom border of that row1/column1 cell. I guess this is because it keeps showing the bottom border of the entire row or the entire table, as it has only 1 row and 8 columns.

    Could you enlighten me, please?

    Thank you very much and keep up the good work!

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

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

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    So, you are first adding a border to all cells, and now you want it removed below a specific cell?
    Can you please post a link to the page with the table where this is not working? I should then be able to find out why your code is not working.

    Regards,
    Tobias

    Thread Starter Goodvalley

    (@goodvalley)

    Yes, I know I’ve added a border to all cells, that’s because I don’t know how to make an exception for the bottom border.

    You can see a sample in http://www.putrumputrum.com/cat/bio/thomas-lang-tocar-lo-nunca-tocado/

    As you can see, the table “Biografía”, “Productes relacionats”, etc. has all the borders, but in this case I would like to avoid the bottom border of the first column, so when moving the mouse it gives the sensation that you are in the right page, if you get what I mean.

    For example, when the visitor clicks on the second cell (with a link in it), he will go to another page. The table in that page will have this second cell without the bottom border, and so with the other pages.

    Thanks again.

    Thread Starter Goodvalley

    (@goodvalley)

    Ooops, I also have seen that when adding a link to a cell, the font changes color and it is underlined.

    Is there any way to keep the font format the same as in my sample?

    Thread Starter Goodvalley

    (@goodvalley)

    Ok, forget about the last post regarding the links style, I found the way to fix this thanks to a post from you in the support forum.

    It’s amazing how you manage to answer every question, I wonder where you find the time for that…

    But I can’t find the proper way of changing the borders of the table as I want to. I’m sure it’s simple, but I just can’t do it. It would be great if you could help me.

    Thanks in advance

    Thread Starter Goodvalley

    (@goodvalley)

    Hi again Tobias,

    I’ve put this css code and it seems to be working well:

    .tablepress-id-1 td {
    	border-right: 1px solid #c9c9c9;
    	border-left: 1px solid #c9c9c9;
    }
    
    .tablepress-id-1 {
    	border-top: 1px solid #c9c9c9;
    }
    
    .tablepress-id-1 td:not(.column-1) {
    	border-bottom: 1px solid #c9c9c9;
    }

    Don’t know if it is the right thing to do, or if it is efficient enough.

    Regards,

    Thread Starter Goodvalley

    (@goodvalley)

    The only thing is left to do is to put a top border except for the cells 1 and 3.

    Here’s the url: http://www.putrumputrum.com/cat/bio/thomas-lang-tocar-lo-nunca-tocado/

    I’ve put this code, but it doesn’t show the top border:

    .tablepress-id-1 td:not(.column-1) {
    	border-left: 1px solid #c9c9c9;
    }
    
    .tablepress-id-1 td {
    	border-right: 1px solid #c9c9c9;
    }
    
    .tablepress-id-1 td:not(.column-1, .column-3) {
    	border-top: 1px solid #c9c9c9;
    }
    
    .tablepress-id-1 td:not(.column-2) {
    	border-bottom: 1px solid #c9c9c9;
    }

    Is there something I am missing?

    Thanks

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    that is a really tricky border problem!
    The problem is that the :not() selector only works with simple selectors in it, i.e. it does not fully support a comma separated list of selectors. Also, it does not work at all in IE 8 and lower. Therefore, instead of using the :not() selector, you should try something like:

    .tablepress-id-1 td {
    	border-top: 1px solid #c9c9c9 !important;
    }
    .tablepress-id-1 .column-1,
    .tablepress-id-1 .column-3 {
    	border-top: 0 !important;
    }

    So, basically, you first add the border to every cell and then remove it again for columns 1 and 3.

    Regards,
    Tobias

    Thread Starter Goodvalley

    (@goodvalley)

    That was awesome!

    Now I just need two more little things (if possible):

    1.- How can I change the width of those cells (or columns) 1 and 3 for them to be thinner?

    2.- When I pass the mouse over any part of the table, it changes color and is highlighted. Is there any way for that to be removed? I mean, I have one cell highlighted in a grey color when the mouse passes over it, but the others get also highlighted in a clearer color. Can the latter be avoided?

    Thank you very much

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    1. For that, you’ll need to decrease the padding in those cells.

    2. Sure, just uncheck the “Row Highlighting” checkbox on the table’s “Edit” screen.

    Regards,
    Tobias

    Thread Starter Goodvalley

    (@goodvalley)

    2.- Oh, but then it won’t highlight one cell when over it.

    I want a specific cell to be highlighted when putting the mouse over it (as is set in that page I showed you), but the other cells get highlighted in a clearer color. It’s that clearer highlight that I want to avoid, while mantaining the highlight of the specific cell I’m over, if possible.

    thanks

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    then just remove the .row-hover class from your CSS for the individual cell hover 🙂

    Regards,
    Tobias

    Thread Starter Goodvalley

    (@goodvalley)

    I’m probably explaining in a bad way…

    If you go to http://www.putrumputrum.com/cat/bio/thomas-lang-tocar-lo-nunca-tocado/

    you will see the cell “Biografía” in a darker grey. If you move the mouse over another cell, this cell will be highlighted in the same colour. That’s what I wanted, and it works fine.

    The problem is that when moving the mouse over any part of the table, the rest of the cells get also highlighted in a clearer grey due to the “Row highlightning” check that needs to be enabled.

    So the question is if I can maintain the highlightning of a specific cell, but get rid of the “other” highlightning in the rest of the table.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    but that’s what I’m trying to fix 🙂
    Please uncheck the “Row Highlighting” checkbox on the table’s “Edit” screen, and then also remove the .row-hover part from the CSS that you added to get the individual cell highlighting.

    Regards,
    Tobias

    Thread Starter Goodvalley

    (@goodvalley)

    Yes, yes, I’ve done that already, but then when the mouse passes over the cells, nothing happens. Nothing is highlighted.

    Regards

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    no, the “Row Highlighting” checkbox is still checked for the table on http://www.putrumputrum.com/cat/bio/thomas-lang-tocar-lo-nunca-tocado/

    Also, to then make

    .tablepress-styling-individual_cell_color .row-hover tr td:hover {
    	background-color: #cccccc !important;
    }

    work, remove the .row-hover from it (and give this “Extra CSS Class” to the table).

    Regards,
    Tobias

Viewing 15 replies - 1 through 15 (of 22 total)
  • The topic ‘Remove bottom border for 1 cell or column’ is closed to new replies.