5

Проблема заключается в том, что по макету у всех tr задан линейный градиент в background. Но если задаешь самой строчке этот самый градиент, то все td наследуют от него этот бг. Пробовал для ячеек отключить наследование значением initial, но как видно не работает. Пробовал сделать бг у ячеек прозрачным, тоже не работает. Можно ли как-то решить эту проблему?

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>

4
  • Ваш CSS приведите в вопросе.
    – Moonvvell
    13 янв 2017 в 10:04
  • Добавил и также более подробно описал.
    – Данил
    13 янв 2017 в 10:32
  • Зачем добавлять стиль для tr, а потом перекрывать фон у ячеек? Как выглядит макет? 13 янв 2017 в 11:01
  • Cтранно как то. а td{ background: none !important; } ?
    – SLy_huh
    13 янв 2017 в 11:09

2 ответа 2

0

Ниже картинка в вопросе - это макет? Дак тут у вас у каждой ячейки свой градиент да и все...

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>

Неидеально, но вариант (правда не могу разобраться почему у средних ячеек тень темнее):

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>

1
0

Если вам необходимо, чтобы градиент растягивался на весь tr, то добавьте код:

tr {
  background-attachment: fixed;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.