CSS border-collapse property

 The function of the CSS border-collapse property is to merge the borders of the table fields to make the table more beautified. Web designers often use the separate or collapse property values ​​of the border-collapse property to increase or increase the border distance of the table fields. It is merged together, border-collapse is often designed with border-spacing attribute to replace the cellspacing function of traditional HTML table , and obtain more expanded design space. Almost all mainstream browsers support the effect of CSS border-collapse attribute . CSS border-collapse property syntax

border-collapse: parameter value;

There are three parameter values ​​for the CSS border-collapse property, which are separate, collapse and inherit, which are written as follows.

• border-collapse:separate; //The default value, the borders are separated from each other
  
• border-collapse:collapse; //The border is merged into a single border
  
• border-collapse:inherit; //Inherited from the border-collapse property value of the parent layer.
  

The third attribute value inherit is less supported by IE browser, so it is not recommended to use it.

CSS border-collapse property example 1. Use the property value separate

<style type="text/css">
<!--
table{
    border-collapse:separate;
    collapse;border:1px solid black;
}
td{
    collapse;border:1px solid black;
}
-->
</style>
< table>
<tr><td>The table after using border-collapse</td><td>The table after using border-collapse</td></tr>
<tr><td>The table after using border-collapse </td><td>The table after border-collapse</td></tr>
</table>

Example presentation effect

Table after using border-collapse	Table after using border-collapse
Table after using border-collapse	Table after using border-collapse

Example 1 shows the effect of "border-collapse:separate;". We specially set the borders of the table fields to black. You can see that the borders of the table fields are separated from each other, as well as the borders of the table. Yes, this is the main function of the separate attribute value. What if you want to make the lines of the table consistent and look like table fields drawn with lines? It's very simple. Just merge the field borders of the table together. Please see Example 2.

CSS border-collapse property example two, use the property value to collapse

<style type="text/css">
<!--
table{
    border-collapse:collapse;
    border:1px solid black;
}
td{
    border:1px solid black;
}
-->
</style>
<table>
<tr ><td>The table after using border-collapse</td><td>The table after using border-collapse</td></tr>
<tr><td>The table after using border-collapse</td> <td>The table after border-collapse</td></tr>
</table>

Example presentation effect

Table after using border-collapse	Table after using border-collapse
Table after using border-collapse	Table after using border-collapse

The second example is to use the effect of "border-collapse:collapse;" to merge the borders of all table fields, and then set the borders to black as well, which looks like a table drawn with black lines. Two examples are the common CSS border-collapse property effects. If you are interested in HTML table design rules or CSS element border design, here are two in-depth studies to read.

• HTML Table
• CSS border

The CSS border-collapse property introduced in this article is somewhat similar to HTML traditional table cellspacing .