Как свернуть разрывы в моем стиле таблицы?

Question

У меня есть таблица, которую мне нужно построить через код, потому что она представляет собой сгруппированные данные из запроса на основе имени человека. Итак, у человека xyz есть 4 строки данных ... Мой вопрос заключается в том, как это сделать для каждой группы, чередующейся по цвету?

Вот что у меня есть до сих пор, и это работает, но есть боковые стороны, сверху и снизу каждой ячейки, я хочу, чтобы цвета для групп были твердыми ... без пробелов ... Я приведены строки таблицы и т.д имени класса перемежается для тех быть colored..alternate

tr.alternate{background-color:#aaa;} 
td.alternate{background-color:#aaa} 

Answer 1

Вы можете использовать border-collapse: collapse в таблице.

Свойство CSS с граничным сбрасыванием выбирает граничную модель таблицы. Это оказывает большое влияние на внешний вид и стиль ячеек таблицы.

Разделенная модель - это традиционная модель границы стола HTML. Смежные ячейки имеют свои собственные границы. Расстояние между ними задается свойством border-spacing.

В сложенной модели границы соседние ячейки таблицы разделяют границы. В модели эта модель, вставка границы вставки ведет себя как канавка, а начинает вести себя как гребень.

источник:border-collapse developer mozilla

Пример без border-collapse:

tr.alternate { 
 
    background-color: #aaa; 
 
}

<table> 
 
    <tr class="alternate"> 
 
    <td>test</td> 
 
    <td>test</td> 
 
    <td>test</td> 
 
    </tr> 
 
    <tr class="alternate"> 
 
    <td>test</td> 
 
    <td>test</td> 
 
    <td>test</td> 
 
    </tr> 
 
</table>

Пример с border-collapse:

table { 
 
    border-collapse: collapse; 
 
} 
 
tr.alternate { 
 
    background-color: #aaa; 
 
}

<table> 
 
    <tr class="alternate"> 
 
    <td>test</td> 
 
    <td>test</td> 
 
    <td>test</td> 
 
    </tr> 
 
    <tr class="alternate"> 
 
    <td>test</td> 
 
    <td>test</td> 
 
    <td>test</td> 
 
    </tr> 
 
</table>

Как вы можете видеть, что вам не нужно отдельный класс для td.