HTML - Разделенная на две части таблица плывет по разметке после добавления отступов в строках
Всем доброго времени суток. Имею такой макет
Реализовал деление таблицы на две части с помощью:
.two-columns {
column-count: 2;
/* number of columns */
column-gap: 200px;
/* space between columns */
}
.two-columns table {
width: 100%;
}<div class="two-columns">
<table>
<tr>
<td>Комплексная мойка</td>
<td>от <span>150</span> BYN</td>
</tr>
<tr>
<td>Мойка моторного отсека</td>
<td>от <span>150</span> BYN</td>
</tr>
<tr>
<td>Мойка подвески со снятием локеров</td>
<td>от <span>150</span> BYN</td>
</tr>
<tr>
<td>Быстрое кварцевое покрытие</td>
<td>от <span>150</span> BYN</td>
</tr>
</table>
</div>Но теперь сталкиваюсь с новой проблемой. Задаю отступы между строками таблицы через border-spacing: 0px 30px, как на макете и сталкиваюсь с проблемой, что таблица плывет по разметке.
После добавления border-spacing:
Как быть в данном случае? Буду очень признателен за помощь в решении вопроса.