Tables

Basic use for tables with a few classes.

Default table

Lorem Ipsum Dolor
Lorem ipsum dolor sit amet Curabitur varius scelerisque libero Vestibulum ante ipsum primis
Aliquam viverra Curabitur pretium porttitor orci Orci varius natoque penatibus
Mauris eget justo Vestibulum et convallis eros Fusce dapibus metus quis
<table>
  <thead>
    <tr>
      <th>Lorem</th>
      <th>Ipsum</th>
      <th>Dolor</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Curabitur varius scelerisque libero</td>
      <td>Vestibulum ante ipsum primis</td>
    </tr>
    <tr>
      <td>Aliquam viverra</td>
      <td>Curabitur pretium porttitor orci</td>
      <td>Orci varius natoque penatibus</td>
    </tr>
    <tr>
      <td>Mauris eget justo</td>
      <td>Vestibulum et convallis eros</td>
      <td>Fusce dapibus metus quis</td>
    </tr>
  </tbody>
</table>

Tables flush

Lorem Ipsum Dolor
Lorem ipsum dolor sit amet Curabitur varius scelerisque libero Vestibulum ante ipsum primis
Aliquam viverra Curabitur pretium porttitor orci Orci varius natoque penatibus
Mauris eget justo Vestibulum et convallis eros Fusce dapibus metus quis
<table class="table-flush">
  <thead>
    <tr>
      <th>Lorem</th>
      <th>Ipsum</th>
      <th>Dolor</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Curabitur varius scelerisque libero</td>
      <td>Vestibulum ante ipsum primis</td>
    </tr>
    <tr>
      <td>Aliquam viverra</td>
      <td>Curabitur pretium porttitor orci</td>
      <td>Orci varius natoque penatibus</td>
    </tr>
    <tr>
      <td>Mauris eget justo</td>
      <td>Vestibulum et convallis eros</td>
      <td>Fusce dapibus metus quis</td>
    </tr>
  </tbody>
</table>

Interleaved tables

Lorem Ipsum Dolor
Lorem ipsum dolor sit amet Curabitur varius scelerisque libero Vestibulum ante ipsum primis
Aliquam viverra Curabitur pretium porttitor orci Orci varius natoque penatibus
Mauris eget justo Vestibulum et convallis eros Fusce dapibus metus quis
<table class="table-interleaved">
  <thead>
    <tr>
      <th>Lorem</th>
      <th>Ipsum</th>
      <th>Dolor</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Curabitur varius scelerisque libero</td>
      <td>Vestibulum ante ipsum primis</td>
    </tr>
    <tr>
      <td>Aliquam viverra</td>
      <td>Curabitur pretium porttitor orci</td>
      <td>Orci varius natoque penatibus</td>
    </tr>
    <tr>
      <td>Mauris eget justo</td>
      <td>Vestibulum et convallis eros</td>
      <td>Fusce dapibus metus quis</td>
    </tr>
  </tbody>
</table>
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet Curabitur varius scelerisque libero Vestibulum ante ipsum primis
Aliquam viverra Curabitur pretium porttitor orci Orci varius natoque penatibus
Mauris eget justo Vestibulum et convallis eros Fusce dapibus metus quis
<table class="table-flush-interleaved">
  <thead>
    <tr>
      <th>Lorem</th>
      <th>Ipsum</th>
      <th>Dolor</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Curabitur varius scelerisque libero</td>
      <td>Vestibulum ante ipsum primis</td>
    </tr>
    <tr>
      <td>Aliquam viverra</td>
      <td>Curabitur pretium porttitor orci</td>
      <td>Orci varius natoque penatibus</td>
    </tr>
    <tr>
      <td>Mauris eget justo</td>
      <td>Vestibulum et convallis eros</td>
      <td>Fusce dapibus metus quis</td>
    </tr>
  </tbody>
</table>

Borderless table

Lorem Ipsum Dolor
Lorem ipsum dolor sit amet Curabitur varius scelerisque libero Vestibulum ante ipsum primis
Aliquam viverra Curabitur pretium porttitor orci Orci varius natoque penatibus
Mauris eget justo Vestibulum et convallis eros Fusce dapibus metus quis
<table class="table-borderless">
  <thead>
    <tr>
      <th>Lorem</th>
      <th>Ipsum</th>
      <th>Dolor</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet</td>
      <td>Curabitur varius scelerisque libero</td>
      <td>Vestibulum ante ipsum primis</td>
    </tr>
    <tr>
      <td>Aliquam viverra</td>
      <td>Curabitur pretium porttitor orci</td>
      <td>Orci varius natoque penatibus</td>
    </tr>
    <tr>
      <td>Mauris eget justo</td>
      <td>Vestibulum et convallis eros</td>
      <td>Fusce dapibus metus quis</td>
    </tr>
  </tbody>
</table>