Border-collapse

In this chapter we will learn how to use the border-collapse property.

The border-collapse CSS property we use with the <table> tag.

The border-collapse CSS property selects a table's border model.

For border-collapse property default value is separate.

CSS Syntax

border-collapse: separate | collapse | initial | inherit;

Let's see an example:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: separate;
      }
      table, th, td {
        border: 1px solid #cccccc;
      }
      thead {
        background-color: #1c87c9;
        color: #ffffff;
      }
      th {
        height: 50px;
        text-align: center;
      }
      td {
        padding: 3px 10px;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Let's see another example:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
      }
      table, th, td {
        border: 1px solid #cccccc;
      }
      thead {
        background-color: #1c87c9;
        color: #ffffff;
      }
      th {
        height: 50px;
        text-align: center;
      }
      td {
        padding: 3px 10px;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Property Values

Value Descriptions
separate In this case all table cells have their own independent borders and there may be space between those cells . It is the default value.
collapse In this case all the table cells have just only one border and have no space between cells.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.




Related articles