Color Tables

This color module sets border styles for tables.

Use the .table-light style to add borders to tables. Border color and width is set with the --border-color and --border-width custom properties.

Artist	Album	Release Date
Huey Lewis and the News	Sports	1983
Phil Collins	No Jacket Required	1985
Peter Gabriel	So	1986

<div class="overflow-scroll">
  <table class="table-light">
    <thead>
      <tr>
        <th>Artist</th> <th>Album</th> <th>Release Date</th>
      </tr>
    </thead>
    <tbody>
      <tr> <td>Huey Lewis and the News</td> <td>Sports</td> <td>1983</td> </tr>
      <tr> <td>Phil Collins</td> <td>No Jacket Required</td> <td>1985</td> </tr>
      <tr> <td>Peter Gabriel</td> <td>So</td> <td>1986</td> </tr>
    </tbody>
  </table>
</div>

Use other color utilities to customize the look.

Artist	Album	Release Date
Huey Lewis and the News	Sports	1983
Phil Collins	No Jacket Required	1985
Peter Gabriel	So	1986

<div class="overflow-scroll">
  <table class="table-light overflow-hidden bg-white border rounded">
    <thead class="bg-darken-1">
      <tr>
        <th>Artist</th> <th>Album</th> <th>Release Date</th>
      </tr>
    </thead>
    <tbody>
      <tr> <td>Huey Lewis and the News</td> <td>Sports</td> <td>1983</td> </tr>
      <tr> <td>Phil Collins</td> <td>No Jacket Required</td> <td>1985</td> </tr>
      <tr> <td>Peter Gabriel</td> <td>So</td> <td>1986</td> </tr>
    </tbody>
  </table>
</div>

CSS Source

.table-light th,
.table-light td {
  border-bottom-width: var(--border-width);
  border-bottom-style: solid;
  border-bottom-color: var(--border-color);
}

.table-light tr:last-child td {
  border-bottom: 0;
}

4 Rules

5 Selectors

59 Declarations

59 Properties

Color Forms

Btn