Как добавить разделительную линию между строками таблицы с помощью «border-collapse: отдельно»? ⇐ CSS

[Anonymous]

I want to have a separating line under each row when using border-collapse: separate;. But using border-bottom on the tr doesn't work when border-collapse is set to separate, so I tried giving border-bottom to the td, however - it has space between each column:

table { width: 100%; text-align: center; border-collapse: separate; border-spacing: 5px 0; } th { text-align: center; font-weight: 700; font-size: 1rem; padding: 0 1rem; border-bottom: 1px solid blue; } td { white-space: nowrap; border-bottom: 1px solid red; } Header 1 Header 2 Header 3 Header 4 Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data

How to achieve a full-line border without spaces? Something like that:

table { width: 100%; text-align: center; border-collapse: collapse; border-spacing: 5px 0; } th { text-align: center; font-weight: 700; font-size: 1rem; padding: 0 1rem; border-bottom: 1px solid blue; } tr { border-bottom: 1px solid red; } Header 1 Header 2 Header 3 Header 4 Some Data Some Data Some Data Some Data Some Data Some Data Some Data Some Data


Источник: https://stackoverflow.com/questions/780 ... lapse-sepa