CSS/Properties/border-collapse

From Web Education Community Group
Jump to: navigation, search

border-collapse

The border-collapse property selects a table's border model(separated or collapsing).

Description

Values collapse | separate | inherit
Initial value separate
Applies to 'table' and 'inline-table' elements
Inherited Yes


Values

  • collapse
    Selects the separated borders border model.


  • separate
    Selects the collapsing borders model.


  • inherit
    Takes the same specified value as the property for the element's parent.


Example

Example A

[style.css]

 table{
   border-width: 1px;
   border-style: solid;
   width: 400px;
 }
 #col{
   border-collapse: collapse;
   margin-bottom: 20px;
 }
 #sep{
   border-collapse: separate;
 }
 tr, th, td{
   border-width:1px;
   border-style: solid;
 }


[index.html]

<body>
  <table id="col">
    <caption>Example 1. collapse</caption>
    <tr>
      <th>Values</th>
      <td>top | bottom | inherit</td>
    </tr>
    <tr>
      <th>Initial value</th>
      <td>top</td>
    </tr>
    <tr>
      <th>Applies to</th>
      <td>table-caption elements</td>
    </tr>
    <tr>
      <th>Inherited</th>
      <td>Yes</td>
    </tr>
  </table>
  <table id="sep">
    <caption>Example 2. separate</caption>
    <tr>
      <th>Values</th>
      <td>top | bottom | inherit</td>
    </tr>
    <tr>
      <th>Initial value</th>
      <td>top</td>
    </tr>
    <tr>
      <th>Applies to</th>
      <td>table-caption elements</td>
    </tr>
    <tr>
      <th>Inherited</th>
      <td>Yes</td>
    </tr>
  </table>
</body>

Csslist2 table-collapse.png

CSS Reference

The CSS specification defines the border-collapse property in 17.6 Borders.