Table Border and Padding Issue
When I apply border-collapse: collapse ; to table, padding stops working, and when remove border-collapse: collapse; padding started working but then border stops working in the table.
I want to apply bottom border to my table row, and also apply padding to my table. how to do it?
https://codepen.io/hamzacodepen951/pen/vYbrYmb
9 Replies
a table can not have padding and maintain the borders in case of collapse. structure does not allow it.
alternativly wrap the table in a div and use the div's padding.
ok thanks
can we also not apply padding and margin directly to table row?
when you use padding or margin a tr, or padding on the table, it will break the border-structure
an other option is to use a pseudo element on the tr to create a border
I want to have a space between two rows
.table-row :first-child{
padding-top: var(--space-small);
}
I did like this, is that fine?
don't know what you actually want as an end result.
you could also use grid/subgrid: https://codepen.io/MarkBoots/pen/oNmygBv
let me know if you solved the question. I will be removing the pen later
removed the pen, here a backup incase you still need it
This is very generous of you ❣️
Thank you