Two Tables Sharing Column Widths by Using 1 Table

by BenjaminRay

HTML

<!-- Note: While you may only have one <THEAD> per table, there's nothing wrong with using <TH> directory inside a <TBODY>, and as many times as you want. -->
<table cellpadding=0 cellspacing=0>
  <tbody>
    <tr>
      <th>a</th>
      <th>b</th>
      <th>c</th>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
    </tr>
    <tr>
      <td>d</td>
      <td>e</td>
      <td>f is wide</td>
    </tr>
    <tr class="table-break">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th>a</th>
      <th>b</th>
      <th>c</th>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
    </tr>
    <tr>
      <td>d</td>
      <td>e is wide</td>
      <td>f</td>
    </tr>
    <tr>
      <td>d</td>
      <td>e</td>
      <td>f</td>
    </tr>
  </tbody>
</table>

CSS

table {
  border-collapse: collapse;
}
td, th {
  border: 1px solid #ddd;
  border-left-width: 0px;
  border-right-width: 0px;
  padding: 5px 10px;
}
tr td:first-child,
tr th:first-child {
  border-left-width: 1px;
}
tr td:last-child,
tr th:last-child {
  border-right-width: 1px;
}
th {
  text-align: left;
  background-color: #348;
  color: #fff;
}
tr.table-break td {
  height: 1em;
  border-left-width: 0px;
  border-right-width: 0px;
}