I really need some help with CSS.
I’m trying to style a table and I’m having difficulties adding borders.
Here’s the table style I’m going for (Photoshopped): https://ibb.co/hFkCkDg
Adding a border around the table is simple:
.table-class {
border: 1px solid #dddddd !important;
padding: 20px !important;
border-radius: 5px;
}
Screenshot: https://ibb.co/Fs6qsNv
To add the separating lines inside the table I need to add a top or bottom border to the rows in the table. Rows are tr
elements. By default a tr
element of a table does not accept borders. So in order to overcome this I added {border-collapse: collapse !important;}
to the whole table which allowed me to add borders to rows, but it messed up the border around the whole table. Screenshot: https://ibb.co/Vgfq9jp
Because of {border-collapse: collapse !important;}
, the properties border
, padding
, border-radius
don’t work for the table.
Which means I can either add a border around the whole table or add the separating lines, but not both.
How can I achieve the look I’m going for?
2
Answers
I’d go using flexbox, and setting
flex: 1
orflex-grow: 1
to the first child of each "row":working with table border is boring, my suggestion is to use the border in
td/th
elements.I created this table without style, only solving the problem of borders