CSS property table's border-collapse border merging

Instructions

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 tables is getting lower and lower in the era of DIV+CSS, sometimes, local tables are still very useful

Especially for tabulation, table is more convenient.
Of course, borders are indispensable for tabulation, but if you add borders directly to the td, a situation will arise where the table has a single line 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

<span style="color: #800000;"><style>
<!--
table</span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;">300px</span>;<span style="color: #ff0000;">     border-collapse</span>:<span style="color: #0000ff;">collapse</span>;<span style="color: #ff0000;">     overflow</span>:<span style="color: #0000ff;">hidden</span>;}<span style="color: #800000;"> tr</span>{<span style="color: #ff0000;"> white-space</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;"> td</span>{<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;">30px</span>;<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;">#333333 solid 1px</span>;}<span style="color: #800000;">
-->
<style></span>

html:

<span style="color: #0000ff;"><</span><span style="color: #800000;">table </span><span style="color: #ff0000;">border</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> cellspacing</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> cellpadding</span><span style="color: #0000ff;">="0"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">tbody</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">tbody</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">table</span><span style="color: #0000ff;">></span>

Reference reading:

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

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