Remove bottom border for 1 cell or column

  • Resolved Goodvalley

    (@goodvalley)


    11 years, 2 months ago

    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!

    https://www.ads-software.com/plugins/tablepress/

Viewing 7 replies - 16 through 22 (of 22 total)
  • Thread Starter Goodvalley

    (@goodvalley)

    Yes, I know you’re seeing it as I have the “Row highlightning” still checked, but this is because I checked it after trying what you said.

    It didn’t work.

    And I also did the exact thing you say in your last post, I even named the extra-class with the same name as you ?? before seeing your post. Trust me, it doesn’t work.

    If I put the same extra-class in the options, add it in the extra-class box in the “edit” screen and uncheck the “row highlightning”, it simply doesn’t work. The individual cell is not highlighted.

    There must be another way, I don’t know… Don’t get me wrong, I know you have resolved every problem to other users, and that’s amazing.

    Regards,

    Thread Starter Goodvalley

    (@goodvalley)

    Ok, I’ve have fixed it, but let me tell you how, perhaps another user may have the same problem…

    My background color is #fcfcfc

    So I did this:

    /* Change the hover row color */
.tablepress-styling-row .row-hover tr:hover td {
	background-color: #fcfcfc !important;
}

/* Change the hover individual cell */
.tablepress-styling-individual_cell_color .row-hover tr td:hover {
	background-color: #cccccc !important;
}

    That did the trick, and the box is still checked.

    Anyway, thanks for helping
    Regards,

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    ok, but why? ?? If you uncheck the box everything will be fine ?? No need for the extra CSS then.
    But yes, your solution also works fine, of course.

    Best wishes,
    Tobias

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

    Thread Starter Goodvalley

    (@goodvalley)

    Unchecking the box eliminates all highlightning, I promise I’ve tried it several times.

    Can I ask you for another tricky one?

    The page is https://www.putrumputrum.com/cat/productes_relacionats/thomas-lang-signature-cymbals/

    Is there any way to NOT highlight the empty spaces?

    Meaning row 1 columns 2,4 and row 2 columns 1,2,4,7,8,9,10

    Thanks for helping, now I’m going to rate the plugin with a 5 stars, of course!

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    not if you then replace

    /* Change the hover individual cell */
.tablepress-styling-individual_cell_color .row-hover tr td:hover {
	background-color: #cccccc !important;
}

    with

    /* Change the hover individual cell */
.tablepress-styling-individual_cell_color tr td:hover {
	background-color: #cccccc !important;
}

    I’m pretty sure ??

    For not highlighting the columns 2 and 4, you could try adding

    .tablepress-styling-individual_cell_color .row-1 .column-2:hover,
.tablepress-styling-individual_cell_color .row-1 .column-4:hover,
.tablepress-styling-individual_cell_color .row-2 .column-1:hover,
.tablepress-styling-individual_cell_color .row-2 .column-2:hover,
.tablepress-styling-individual_cell_color .row-2 .column-4:hover,
.tablepress-styling-individual_cell_color .row-2 .column-7:hover,
.tablepress-styling-individual_cell_color .row-2 .column-8:hover,
.tablepress-styling-individual_cell_color .row-2 .column-9:hover,
.tablepress-styling-individual_cell_color .row-2 .column-10:hover {
	background-color: #ffffff !important;
}

    Yes, it’s ugly ?? Sorry. I guess that’s the drawback of using a table solution here.

    Regards,
    Tobias

    Thread Starter Goodvalley

    (@goodvalley)

    It works like a charm!

    I should have known that I could add that one, it’s not that ugly!

    Thanks very much, Tobias.
    Have a nice Christmas!

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

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

    Have a nice Holiday season, too!
    Regards,
    Tobias

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