​x
 
1
<!doctype html>
2
<title>Example</title>
3
<style>
4
table {
5
    border: 1px solid orange;
6
    width: 40vw;
7
    margin: 2vw;
8
    float: left;
9
  }
10
td, th {
11
    border: 1px solid orange;
12
    padding: 1vw;
13
  }
14
.separate {
15
    border-collapse: separate;
16
}
17
.collapse {
18
    border-collapse: collapse;
19
}
20
p {
21
    clear: both;
22
}
23
</style>
24
<table class="separate">
25
  <tr>
26
    <th>Header</th>
27
    <th>Header</th>
28
  </tr>
29
  <tr>
30
    <td>Cell</td>
31
    <td>Cell</td>
32
  </tr>
33
  <tr>
34
    <td>Cell</td>
35
    <td>Cell</td>
36
  </tr>
37
</table>
38
​
39
<table class="collapse">
40
  <tr>
41
    <th>Header</th>
42
    <th>Header</th>
43
  </tr>
44
  <tr>
45
    <td>Cell</td>
46
    <td>Cell</td>
47
  </tr>
48
  <tr>
49
    <td>Cell</td>
50
    <td>Cell</td>
51
  </tr>
52
</table>
53
<p>The default value for <code>border-collapse</code> is <code>separate</code>. </p>