0

Для всех td в таблице задан box-shadow вместо border. У некоторых ячеек есть другой цвет фона, но он перекрывает box-shadow. Как не перекрывать? background-clip к ячейкам с фоном пробовал все варианты, не работает.

table {
  border-collapse: collapse;
}

td {
  width: 100px;
  height: 100px;
  box-shadow: 1px 0 1px rgba(0, 0, 0, 0.2);
}

.background1 {
  background: red;
}

.background2 {
  background: yellow;
}

.background3 {
  background: pink;
}

.background4 {
  background: pink;
}
<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td class="background1"></td>
    <td class="background2"></td>
    <td class="background3"></td>
    <td class="background4"></td>
  </tr>
</table>

2
  • 1
    напишите все на дивах. 14 мар 2020 в 16:13
  • показал примерно. два последних с одинаковым фоном, чтобы было понятно чего хочу. чтобы между ячейками с фоном тоже были границы как у рядов выше с border-shadow.
    – Black Fire
    14 мар 2020 в 16:22

1 ответ 1

3

table {
  border-collapse: collapse;
}

td {
  width: 100px;
  height: 100px;
  box-shadow: inset 1px 0 1px 1px rgba(0, 0, 0, 0.2);
}

.background1 {
  background: red;
}

.background2 {
  background: yellow;
}

.background3 {
  background: pink;
}

.background4 {
  background: pink;
}
<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td class="background1"></td>
    <td class="background2"></td>
    <td class="background3"></td>
    <td class="background4"></td>
  </tr>
</table>

Ваш ответ

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

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