Table padding not working

Question

I have a table that sits within a parent div full of body text and other content. I have the following CSS which does not seem to work:

table {width:100%; paddin         


        

Answer 1

This is the reason why;

From MDN, to use padding in tables, you need to have border-collapse: separate; so as to allow for the use of border-spacing because border-spacing is a factor in the calculation of distance between the outer table edge and the edge of the outer cells (see quotes from MDN below). After that you can now assign padding a value. You can also set border-spacing: 0px; to cancel out the addition of border-spacing to the padding.

The border-spacing CSS property sets the distance between the borders of adjacent cells. This property applies only when border-collapse is separate.

The border-spacing value is also used along the outside edge of the table, where the distance between the table's border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) border-spacing and the relevant (top, right, bottom, or left) padding on the table.