border-collapse

border-collapse

CSS border-collapse Property

The CSS border-collapse property is used to separate or collapse borders on HTML tables or inline table elements.

CSS CODE EXAMPLE

<style type="text/css">
#table1 {
    border: purple 3px solid;
    border-collapse: collapse;
}
#table2 {
    border: green 3px solid;
    border-collapse: separated;
}
#table1 td { border: purple 1px dashed; padding:12px; }
#table2 td { border: green 1px dashed; padding:12px; }
</style>
<table id="table1">
  <tr>
    <td>Cell data</td>
    <td>Cell data</td>
  </tr>
  <tr>
    <td>Cell data</td>
    <td>Cell data</td>
  </tr>
</table>
<hr />
<table id="table2">
  <tr>
    <td>Cell data</td>
    <td>Cell data</td>
  </tr>
  <tr>
    <td>Cell data</td>
    <td>Cell data</td>
  </tr>
</table>

 

Cell data	Cell data
Cell data	Cell data

---

Cell data	Cell data
Cell data	Cell data

Possible Values:

collapse ━ separated ━ inherit

Related Properties

border-spacing

click here to code. 

Tweet