To gain better clarity, let's visualize the CSS box tree.
We'll start by examining a simple HTML table.
<table>
<tr>
<td>Lorem, ipsum dolor.</td>
<td>Lorem, ipsum dolor.</td>
</tr>
</table>
It's important to note that the tr element in the HTML code will automatically be wrapped in a tbody element by the HTML parser, resulting in an identical DOM document as shown below:
<table>
<tbody>
<tr>
<td>Lorem, ipsum dolor.</td>
<td>Lorem, ipsum dolor.</td>
</tr>
</tbody>
</table>
By adding borders and defining border-spacing through CSS, we create our initial snippet:
<table border style="border-spacing:1em">
<tbody>
<tr>
<td>Lorem, ipsum dolor.</td>
<td>Lorem, ipsum dolor.</td>
</tr>
</tbody>
</table>
Now, let's examine the structure of the DOM document and the Box Tree. It is stated in the CSS Tables Level 3 draft specification that the border-spacing property applies to "table grid boxes when border-collapse is separate".
https://i.sstatic.net/ggpuu.gif
If the display property of the table element is set to 'display:block', there will be no change visible in the displayed table.
<table border style="border-spacing:1em; display:block">
<tbody>
<tr>
<td>Lorem, ipsum dolor.</td>
<td>Lorem, ipsum dolor.</td>
</tr>
</tbody>
</table>
In this scenario, the table element does not generate the usual table wrapper box and table grid box but just functions as a standard block box. However, due to the incomplete CSS table structure, missing pieces are automatically generated to complete it, resulting in a Box Tree almost identical to that of the previous case but with a different process:
https://i.sstatic.net/dg8vD.gif
The property 'border-spacing' is inherited and applied to the block container box, with the anonymous table grid box inheriting and implementing the value.
It's worth noting that if all elements within the table, including internal ones, are set to display:block, the border-spacing feature will not take effect:
table, table * {
display:block;
}
<table border style="border-spacing:1em">
<tbody>
<tr>
<td>Lorem, ipsum dolor.</td>
<td>Lorem, ipsum dolor.</td>
</tr>
</tbody>
</table>
Since the entire table structure is eliminated with all elements set to 'display:block', CSS does not need to create the anonymous table grid box.
https://i.sstatic.net/5JMQf.gif