Как можно задать фон border/tr у таблицы?

Question

[Александр]

Добрый день, Как можно задать фон border/tr у таблицы? А то если задаю фон для tr он обрезается на куски td . Допустим имеется таблица

<table class="table">
  <tbody><tr>
    <th>Заголовок</th>
    <th>Опция</th>
    <th>Опция</th>
  </tr>
  <tr>
    <td>Раз</td>
    <td>Два</td>
    <td>Три</td>
  </tr>
  <tr>
    <td>34</td>
    <td>35</td>
    <td>40</td>
  </tr>

</tbody></table>

Мне необходимо, сделать так чтобы это выглядело примерно вот так:
https://yadi.sk/i/fstgQ636yqwj4

Answer 1

[weranda]

https://jsfiddle.net/1hhh0gg7/

Comments

[Александр]

Делал точно так же, но что то кривилось. Сейчас обнаружил почему, у меня стили применялись tr + tr и шел сдвиг при таком варианте) Ну спасибо, что вновь менявернули к этому варианту

Answer 2

[RoverWhite]

Вроде что-то типа этого

tr ~ tr > td {
  border-top: 1px dashed black;
}

td {
   padding: 5px 2px;
}

tr {
   background-color: gray;
}

table {
   border-spacing: 0px;
}

Comments

[Александр]

Линия не просто dashed, она волнистая

[RoverWhite]

В каком смысле волнистая?

[RoverWhite]

Т.е. та кривизна линий которая присутствует на рисунке должна быть отображена в результате? Это не погрешность при отрисовке картинки?

[RoverWhite]

Если требуется какая-то особая линия разделитель, которой нет в CSS то тут придется рисовать картинку, которая будет отражать вид линии а далее через background-repeat

[Александр]

На картинка показано, как фон кривится, из за того что накладывается на каждую ширину td а не на всю tr . Должна быть волнистая линия, без резких искривлений

[RoverWhite]

Вот если развить мысль weranda
tr:before{
content: '';
position: absolute;
height: 5px;
width: 100%;
border-top: 0px;
}
tr ~ tr:before{
content: '';
position: absolute;
height: 5px;
width: 100%;
border-top: 1px dashed black;
}