The border-collapse property specifies how the table borders are displayed.
This property can apply to the TABLE element.
table {
border: 2px #000000 solid;
border-collapse: collapse;
}
| Property | Value | Explanation |
|---|---|---|
| border-collapse | collapse | the borders are collapsed |
| separate | the borders are separated (default) |
<html> <head> <title>TAG index</title> <style type="text/css"> table { border: 2px #2b2b2b solid; width: 400px; margin-bottom: 20px; } td, th { border: 2px #2b2b2b solid; } #example1 { border-collapse: collapse; } #example2 { border-collapse: separate; } </style> </head> <body> <table id="example1"> <tr> <th colspan="2">The borders are collapsed</th> </tr> <tr> <td>Cell A</td> <td>Cell B</td> </tr> </table> <table id="example2"> <tr> <th colspan="2">The borders are separated</th> </tr> <tr> <td>Cell A</td> <td>Cell B</td> </tr> </table> </body> </html>
| The borders are collapsed | |
|---|---|
| Cell A | Cell B |
| The borders are separated | |
|---|---|
| Cell A | Cell B |