Detailed explanation of border-spacing and border in CSS tables

1. Available, it needs to be set on the table tag or display is a table or inline-table element.

It only works if the border-collapse attribute is present. If the cells are not separated, how come the distance between the cells is determined?

　border-spacing：10px 30px;

　 means The horizontal spacing between cells is 10px, and the vertical spacing is 30px
　

table{
border-collapse: collapse;
/*设置为collapse后，border-spacing就失效了*/
/*看来这个属性要在table上设置*/
border-spacing: 130px 15px;
}

border

1 in the table1.

HereThere are two borders, one can be set on the table tag, and the other can be set on the td.

The border on the table refers to the border of the outermost frame, and the border of td refers to the border of the smallest cell.

The specific performance is as follows:

Here I set padding and border-spacing.

2.

When I set border-collapse to collapse, a magical scene happened.

Padding and border-spacing don't work anymore. Border-spacing is understandable, but why does padding have no effect?

My understanding is that the key is collapse. After setting this attribute, all borders are connected together. Including peripheral borders and cell borders, cells are no longer divided.

The above is the detailed content of Detailed explanation of border-spacing and border in CSS tables. For more information, please follow other related articles on the PHP Chinese website!