There is a table in which all the columns have their own styles and are painted in different colors. How can I "highlight" some of the rows in the table entirely? Those. all colors should be made darker or lighter, so as not to write changed styles for each column for highlighted lines.

  • opacity gives a very unpleasant effect and makes the text also transparent and poorly readable - Isaev
  • @Isaev, colors set in RGBA. - Deonis

1 answer 1

Implement translucency for the background in RGBA format, that is, if you have black in HEX #000000 , then in RGBA it will be (0,0,0,1) , where the last digit is translucency, in styles this implementation will look like this So:

 .class { background-color: rgba(0,0,0,1); } .class.active { background-color: rgba(0,0,0,.5); // Полупрозрачность 50% для фона, не затрагивает текст внутри }

I think problems with the front color HEX in RGB will not arise.

  • @MasterAlex, this is all I know and flooded with a translucent 1x1 pixel pattern. Problem is a bit different. We have a TR in it there are a lot of TD tags ... If I set the transparency for TR, nothing changes, because TD is not transparent over it. It turns out again the same problem that you need to have a dozen transparent styles for the columns and still a dozen not transparent? I do not like this approach. The truth is somewhere nearby and everything is as usual simple) - Isaev
  • one
    @Isaev, if <td> have their own BG, then when you hover over <tr>, set the color of its child <td> tr: hover td {background-color: rgba (0,0,0, .5); } - Deonis
  • @Deonis, then we repaint the entire line in the specified color, but it is necessary that the colors remain, just become a little lighter / darker - Isaev
  • one
    @Isaev, but tell me how you set "twenty" opaque styles for columns, and I will tell you that for these "twenty" styles you need "twenty" transparent styles for guidance. You can, of course, implement the addition of transparency on JS, but believe me, this is an option worse than having “dtsat” styles. - MasterAlex
  • one
    And if you want to automate the whole thing, you can add it to the LESS project. It is possible to lighten color using the lighten function, and you can also write a function that accepts color, and gives 2 styles at the output: opaque and transparent. but after compiling the output, there will still be 2 styles that you do not want to write with your hands. - MasterAlex