The problem is that the layout of all tr given a linear gradient in the background . But if you set this very gradient to the line itself, then all td inherit this bg from it. I tried to disable inheritance for cells with the initial value, but apparently it does not work. I tried to make bg in cells transparent, also does not work. Is there any way to solve this problem?

 table { font-size: 12px; color: #60625e; border-collapse: separate; border-spacing: 0 10px; width: 100%; } tr { border-radius: 5px; background-color: #fff; box-shadow: 0 10px 10px rgba(0,0,0,.05), inset 0 0 10px rgba(0,0,0,.05); background-image: linear-gradient(122deg, rgba(200,200,200,.1), rgba(213,213,213,.1) 22%, rgba(255,255,255,.1)); } td { text-align: center; vertical-align: middle; padding: 15px; background: initial; } 
 <table> <tr class="block"> <th colspan="2">Метраж квартиры</th> <td>От 30 м.кв</td> <td>От 40 м.кв.</td> <td>От 60 м.кв.</td> <td>От 80 м.кв.</td> <td>От 100 м.к.</td> <td colspan="1">Больше 120 м.кв.</td> </tr> </table>

  • Give your CSS in question. - Moonvvell
  • Added and also described in more detail. - Danil
  • Why add style for tr , and then overlay the background of the cells? What does the layout look like? - Sasha Omelchenko
  • Strange as that. td{ background: none !important; } td{ background: none !important; } ? - SLy_huh

2 answers 2

Below is the picture in question - is it a layout? Duck here you have each cell its gradient and everything ...

 table { font-size: 12px; color: #60625e; border-collapse: separate; border-spacing: 0 10px; width: 100%; } tr { border-radius: 5px; background-color: #fff; box-shadow: 0 10px 10px rgba(0, 0, 0, .05), inset 0 0 10px rgba(0, 0, 0, .05); } td { text-align: center; vertical-align: middle; padding: 15px; background-image: linear-gradient(122deg, rgba(200, 200, 200, .1), rgba(213, 213, 213, .1) 22%, rgba(255, 255, 255, .1)); } 
 <table> <tr> <td colspan="2">Метраж квартиры</td> <td>От 30 м.кв</td> <td>От 40 м.кв.</td> <td>От 60 м.кв.</td> <td>От 80 м.кв.</td> <td>От 100 м.к.</td> <td colspan="1">Больше 120 м.кв.</td> </tr> </table>

Not perfect, but an option (although I can not figure out why the shadow is darker in the middle cells):

 table { width: 90vw; border-collapse: collapse; margin: 5vw; } tr { height: 3em; line-height: 3em; text-align: center; box-shadow: 0 0 1em rgba(0, 0, 0, .2); } td { background-image: linear-gradient(rgba(0, 0, 0, .1), white .5em, white 2.5em, rgba(0, 0, 0, .1)); } tr td:first-child { background-image: linear-gradient(90deg, rgba(0, 0, 0, .05), transparent .5em, transparent), linear-gradient(rgba(0, 0, 0, .05), white .5em, white 2.5em, rgba(0, 0, 0, .05)); border-radius: .25em 0 0 .25em; } tr td:last-child { background-image: linear-gradient(-90deg, rgba(0, 0, 0, .05), transparent .5em, transparent), linear-gradient(rgba(0, 0, 0, .05), white .5em, white 2.5em, rgba(0, 0, 0, .05)); border-radius: 0 .25em .25em 0; } 
 <table> <tr> <td>1 </td> <td>2 </td> <td>2 </td> <td>3 </td> </tr> <tr> <td>1 </td> <td>2 </td> <td>2 </td> <td>3 </td> </tr> </table>

If you need the gradient to stretch all over tr , then add the code:

 tr { background-attachment: fixed; }