Striped Modifier

The .striped class adds alternating background colors to rows or child elements, making it easier to scan across data-dense content.

The modifier works at two levels, depending on the element it's applied to:

• On <table>: Stripes <tr> rows inside <tbody> — <thead> and <tfoot> rows are left unstyled.
• On other elements (lists, cards, any container): Stripes every odd direct child that isn't a <table>.

Tables

Apply .striped to a <table> to add zebra-striping on body rows. Row headers (<th scope="row">) are also striped.

See code

<div class="overflow-auto">
  <table class="striped">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th scope="row">∑</th>
        <td>Total</td>
        <td>Total</td>
        <td>Total</td>
        <td>Total</td>
        <td>Total</td>
        <td>Total</td>
        <td>Total</td>
      </tr>
    </tfoot>
  </table>
</div>

Lists

.striped works on <ul> and <ol> elements, adding alternating backgrounds to list items. This is especially helpful in card-like lists where rows benefit from visual separation.

See code

<div class="card stiped" role="list">
  <div role="listitem">
    Item 1
  </div>
  <div role="listitem">
    Item 2
  </div>
  <div role="listitem">
    Item 3
  </div>
  <div role="listitem">
    Item 4
  </div>
</div>

Groups

.striped also stripes children of <div> elements with role="list", useful for card-list layouts where a semantic <ul> isn't an option.

See code

<div class="card striped" role="group">
  <span>
    Item 1
  </span>
  <span>
    Item 2
  </span>
  <span>
    Item 3
  </span>
  <span>
    Item 4
  </span>
</div>