<div class="container">
  <table class="separate">
    <caption><em>Separate border model</em></caption>
    <thead>
      <tr>
        <th>Header content 1</th>
        <th>Header content 2</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td>Footer content 1</td>
        <td>Footer content 2</td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>Body content 1</td>
        <td>Body content 2</td>
      </tr>
    </tbody>
  </table>
  <table class="collapsed">
    <caption><em>Collapsed border model</em></caption>
    <thead>
      <tr>
        <th>Header content 1</th>
        <th>Header content 2</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td>Footer content 1</td>
        <td>Footer content 2</td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>Body content 1</td>
        <td>Body content 2</td>
      </tr>
    </tbody>
  </table>
</div>
body {
	background: #f9f9f9;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 20px auto 0;
  max-width: 900px;
  text-align: center;
}

table {
  margin: 1em;
  float: left;
}

table,
td,
th {
  padding: 1em;
  border: 1px solid #aaa;
}

th {
  background: #d1e9f8;
}

td {
  background: #eaf1fb;
}

caption {
  padding: .5em;
  color: #0099CC;
}

.separate {
  border-collapse: separate;
}

.collapsed {
  border-collapse: collapse;
}