CSS Table

Use table utilities to easily add styles and effects to tables.

Example

ID	Animal name	Animal type
1	Kitty	cat
2	Doug	dog
3	Travis	tiger

View code


<div class="table-responsive">
  <table class="table" id="defaultTable">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Animal name</th>
        <th scope="col">Animal type</th>
      </tr>
    </thead>
    <tbody id="defaultTableBody">
      <tr>
        <th scope="row">1</th>
        <td>Kitty</td>
        <td>cat</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Doug</td>
        <td>dog</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Travis</td>
        <td>tiger</td>
      </tr>
    </tbody>
  </table>
</div>

Styles and effects

Border style options include:

table-border: outer border around table
table-bordered: bordered table and cells
table-border-row: top border on each row
table-borderless: no borders

By default, table rows are styled with alternating stripes. Use table-unstriped to remove this style.

Use table-hover to add a hover effect to table rows.

For wider tables, in order to enable horizontal scrolling on mobile devices, tables must be wrapped in a table-responsive div.

Get in touch

Do you have an idea, or want to help us improve this page? Reach out to us via email.

DTMB-DG-Support@michigan.gov

Need help? Visit our Support page to learn how to get assistance, troubleshoot issues, and connect with the team.