CSS property table's border-collapse border merging

Description

This CSS property is used to set whether the row and column borders of the table are combined into a single border, or whether they have separate borders.

separate Default value. The borders are separated, not merged.
collapse borders merge. That is, if they are adjacent, they share the same border.

Although the weight of table is getting lower and lower in the era of DIV+CSS, sometimes, local table is still very useful

Especially in tabulation, table is more convenient.
Of course, borders are indispensable for tabulation, but if you add borders directly to td, a situation will arise where the table has single lines all around the outside and double lines inside.

You can also achieve all single lines through other separate settings, but here is the simplest method. CSS provides the border-collapse attribute to control the merging or separation of connected borders

CSS code

<style>
<!--
table{ width:300px;     border-collapse:collapse;     overflow:hidden;} tr{ white-space:0;} td{ height:30px; border:#333333 solid 1px;}-->
<style>

<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>index</td>
<td>index</td>
<td>index</td>
</tr>
<tr>
<td>index</td>
<td>index</td>
<td>index</td>
</tr>
<tr>
<td>index</td>
<td>index</td>
<td>index</td>
</tr>
</tbody>
</table>

Reference reading:

http://www.manongjc.com/article/1211.html

http://www.manongjc.com/article/1212.html