CODEWITHSUNDEEP
css
Costantin
Costantin

Reputation: 2656

Gradient across table

I have a table where the user can click to select a specific cell to select it. on click I apply a css class to <td> the class is for example clicked

Now it looks something like this: 

.clicked {
    background: #43C6AC;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #F8FFAE, #43C6AC);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #F8FFAE, #43C6AC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

Which returns something like this:

enter image description here

I would like to make the gradient uniform across the cells nearby, so if for example 4 cells are selected the first one should be green and the very last yellowish.

How can I do this? I'm thinking that maybe the best approach would be to have the table all in gradient an if not selected apply a white background.

Is this the best way? Thanks

Upvotes: 0

Views: 469

Answers (1)

mtr.web
mtr.web

Reputation: 1515

I agree that this is your best approach. The cleanest way would be to apply the gradient to the entire table or row, as you mentioned, and use a selector for all non-clicked elements that applies plain white. The CSS would look comething like this:

tr {
    background: #43C6AC;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #F8FFAE, #43C6AC);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #F8FFAE, #43C6AC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

td:not(.clicked) { background: #fff; }

JSFiddle

Upvotes: 1

Related Questions