How to change background colour for a row except the first cell

  • Resolved kyperstudios

    (@kyperstudios)


    3 years ago

    Hi,

    I am trying to make the first column the same colour, and rows 1 and 2 another colour. However, as you can see in the table in the url provided, the second row column 1 cell is not same as the colour of column 1. The CSS I use as below:

    `.tablepress-id-1 .column-1 {
    background-color: #A6D4EA !important;
    }

    .tablepress-id-1 .row-2 td {
    background-color: #D9EDF7 !important;
    }

    .tablepress-id-1 .column-1 .row-2 {
    background-color: #A6D4EA !important;
    }

    What should I do to make that cell have the same background colour as the column 1?
    And you may also find that I need to use !important to make the other background-color change to my preferred colour, I wonder why is it like this as I expected the CSS should work well without !important.

    The page I need help with: [log in to see the link]

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

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    Essentially, the order of column and row in the last piece of CSS is wrong. It would have to be

    .tablepress-id-1 .row-2 .column-1 {

    However, we can optimize this, so that we also won’t need the !important:

    .tablepress-id-1 .row-2 td {
  background-color: #D9EDF7;
}
.tablepress-id-1 th.column-1,
.tablepress-id-1 td.column-1 {
  background-color: #A6D4EA;
}

    Here, the order (first the CSS for the row, then that for the column) is also important.

    Regards,
    Tobias

    Thread Starter kyperstudios

    (@kyperstudios)

    Hi Tobias,

    The CSS works perfectly!

    Thank you for your explanation!

    Plugin Author TobiasBg

    (@tobiasbg)

    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!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to change background colour for a row except the first cell’ is closed to new replies.