Content Table

Clean and minimal styles for <table>, providing consistentĀ spacings and a minimal unborderedĀ look.
PlanetDiam. (km)Dist. to Sun (AU)Grav. (m/sĀ²)
Mercury4,8800.393.7
Venus12,1040.728.9
Earth12,7421.009.8
Mars6,7791.523.7
Average9,1260.916.5
<table>
  <thead>
    <tr>
      <th scope="col">Planet</th>
      <th scope="col">Diameter (km)</th>
      <th scope="col">Distance to Sun (AU)</th>
      <th scope="col">Orbit (days)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Mercury</th>
      <td>4,880</td>
      <td>0.39</td>
      <td>88</td>
    </tr>
    <tr>
      <th scope="row">Venus</th>
      <td>12,104</td>
      <td>0.72</td>
      <td>225</td>
    </tr>
    <tr>
      <th scope="row">Earth</th>
      <td>12,742</td>
      <td>1.00</td>
      <td>365</td>
    </tr>
    <tr>
      <th scope="row">Mars</th>
      <td>6,779</td>
      <td>1.52</td>
      <td>687</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Average</th>
      <td>9,126</td>
      <td>0.91</td>
      <td>341</td>
    </tr>
  </tfoot>
</table>

Color schemes#

data-theme="light" or data-theme="dark" can be used at any level: <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>.

Ā 

PlanetDiam. (km)Dist. to Sun (AU)Grav. (m/sĀ²)
Mercury4,8800.393.7
Venus12,1040.728.9
Earth12,7421.009.8
Mars6,7791.523.7
Average9,1260.916.5
<table>
  <thead data-theme="dark">
    ...
  </thead>
  <tbody>...</tbody>
  <tfoot>...</tfoot>
</table>

Striped table#

.striped enable striped rows (not available in the classā€‘lessĀ version).

PlanetDiam. (km)Dist. to Sun (AU)Grav. (m/sĀ²)
Mercury4,8800.393.7
Venus12,1040.728.9
Earth12,7421.009.8
Mars6,7791.523.7
Average9,1260.916.5
<table class="striped">
  ...
</table>

Edit this page on GitHub

Column expanders

Place <hr> element inside <th> column to expand it horizontally:

Column with <hr>
 Same column without <hr> ...
(012) 345-6789 (012) 345-6789

Living examples of big tables with <hr>-expanders:

How it works:

th {
  hr {
    width: 12ch; /* min ~65/12 = ~5 cols */
    height: 0;
    margin: 0;
    visibility: hidden;

    &.lg {
      width: 18ch;
    }
    &.x2 {
      width: 24ch;
    }
  }
}

Borderless table

.borderless removes all default borders:

Less borders
More fun

Living example: /#minimal-dependencies table