Bootstrap class: .table-dark

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-dark">
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
    </tr>
  </tbody>
</table>

Preview

#	First Name	Last Name
1	Mark	Otto
2	Jacob	Thornton

Check .table-dark in a real project

Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.

Open in Visual Editor →

Tips 💡

You don't need to remember all CSS classes. Just use the Bootstrap Editor instead.

Sass source

/* _print.scss:123 */
.table-dark {
  color: inherit;

  th,
  td,
  thead th,
  tbody + tbody {
    border-color: $table-border-color;
  }
}

/* _tables.scss:132 */
.table-dark {
  color: $table-dark-color;
  background-color: $table-dark-bg;

  th,
  td,
  thead th {
    border-color: $table-dark-border-color;
  }

  &.table-bordered {
    border: 0;
  }

  &.table-striped {
    tbody tr:nth-of-type(odd) {
      background-color: $table-dark-accent-bg;
    }
  }

  &.table-hover {
    tbody tr {
      @include hover {
        background-color: $table-dark-hover-bg;
      }
    }
  }
}

Uses variables

/* _print.scss:123 */
$table-border-color

/* _tables.scss:132 */
$table-dark-color
$table-dark-bg
$table-dark-border-color
$table-dark-accent-bg
$table-dark-hover-bg