Tables

Tables are a useful interface element that allows to visualise data and arrange it in a clear way. Thanks to that, users can browse a lot of information at once and a good table design will help you take care of its clarity.

Basic Table

The basic table design has light padding and the presented data is separated wih horizontal dividers. It helps provide users with all the necessary information, without overwheling them with visuals.

The .table class adds basic styling to a table:

Name	Title	Email	Role
Paweł Kuna	UI Designer, Training	paweluna@howstuffworks.com	User	Edit
Jeffie Lewzey	Chemical Engineer, Support	jlewzey1@seesaa.net	Admin	Edit
Mallory Hulme	Geologist IV, Support	mhulme2@domainmarket.com	User	Edit
Dunn Slane	Research Nurse, Sales	dslane3@epa.gov	Owner	Edit
Emmy Levet	VP Product Management, Accounting	elevet4@senate.gov	Admin	Edit

<div class="table-responsive">
  <table
		class="table table-vcenter">
    <thead>
      <tr>
        <th>Name</th>
        <th>Title</th>
        <th>Email</th>
        <th>Role</th>
        <th class="w-1"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td >Paweł Kuna</td>
        <td class="text-muted" >
          UI Designer, Training
        </td>
        <td class="text-muted" ><a href="#" class="text-reset">paweluna@howstuffworks.com</a></td>
        <td class="text-muted" >
          User
        </td>
        <td>
          <a href="#">Edit</a>
        </td>
      </tr>
      <tr>
        <td >Jeffie Lewzey</td>
        <td class="text-muted" >
          Chemical Engineer, Support
        </td>
        <td class="text-muted" ><a href="#" class="text-reset">jlewzey1@seesaa.net</a></td>
        <td class="text-muted" >
          Admin
        </td>
        <td>
          <a href="#">Edit</a>
        </td>
      </tr>
      <tr>
        <td >Mallory Hulme</td>
        <td class="text-muted" >
          Geologist IV, Support
        </td>
        <td class="text-muted" ><a href="#" class="text-reset">mhulme2@domainmarket.com</a></td>
        <td class="text-muted" >
          User
        </td>
        <td>
          <a href="#">Edit</a>
        </td>
      </tr>
      <tr>
        <td >Dunn Slane</td>
        <td class="text-muted" >
          Research Nurse, Sales
        </td>
        <td class="text-muted" ><a href="#" class="text-reset">dslane3@epa.gov</a></td>
        <td class="text-muted" >
          Owner
        </td>
        <td>
          <a href="#">Edit</a>
        </td>
      </tr>
      <tr>
        <td >Emmy Levet</td>
        <td class="text-muted" >
          VP Product Management, Accounting
        </td>
        <td class="text-muted" ><a href="#" class="text-reset">elevet4@senate.gov</a></td>
        <td class="text-muted" >
          Admin
        </td>
        <td>
          <a href="#">Edit</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Responsive tables

Use the .table-responsive class across each breakpoint for horizontal scrolling tables. If you want to create responsive tables up to a specific breakpoint, use .table-responsive{-sm|-md|-lg|-xl}. From that breakpoint and up, the table will behave normally, rather than scroll horizontally.

#	Heading 1	Heading 2	Heading 3	Heading 4	Heading 5	Heading 6	Heading 7	Heading 8	Heading 9	Heading 10
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

<table class="table table-responsive">
  <thead>
    <tr>
      <th>#</th>
      <th class="text-nowrap">Heading 1</th>
      <th class="text-nowrap">Heading 2</th>
      <th class="text-nowrap">Heading 3</th>
      <th class="text-nowrap">Heading 4</th>
      <th class="text-nowrap">Heading 5</th>
      <th class="text-nowrap">Heading 6</th>
      <th class="text-nowrap">Heading 7</th>
      <th class="text-nowrap">Heading 8</th>
      <th class="text-nowrap">Heading 9</th>
      <th class="text-nowrap">Heading 10</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

No wrap

If you don’t want the table cell content to wrap to another line, use the table-nowrap class.

Name	Title	Email	Role
Paweł Kuna	UI Designer, Training	paweluna@howstuffworks.com	User	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates.	Edit
Jeffie Lewzey	Chemical Engineer, Support	jlewzey1@seesaa.net	Admin	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates.	Edit
Mallory Hulme	Geologist IV, Support	mhulme2@domainmarket.com	User	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates.	Edit
Dunn Slane	Research Nurse, Sales	dslane3@epa.gov	Owner	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates.	Edit
Emmy Levet	VP Product Management, Accounting	elevet4@senate.gov	Admin	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates.	Edit

<div class="table-responsive">
  <table
		class="table table-vcenter table-nowrap">
    <thead>
      <tr>
        <th>Name</th>
        <th>Title</th>
        <th>Email</th>
        <th>Role</th>
        <th></th>
        <th class="w-1"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td >Paweł Kuna</td>
        <td class="text-muted" >
          UI Designer, Training
        </td>
        <td class="text-muted" ><a href="#" class="text-reset">paweluna@howstuffworks.com</a></td>
        <td class="text-muted" >
          User
        </td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
          expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium
          quaerat quo repellendus, voluptates.
        </td>
        <td>
          <a href="#">Edit</a>
        </td>
      </tr>
      <tr>
        <td >Jeffie Lewzey</td>
        <td class="text-muted" >
          Chemical Engineer, Support
        </td>
        <td class="text-muted" ><a href="#" class="text-reset">jlewzey1@seesaa.net</a></td>
        <td class="text-muted" >
          Admin
        </td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
          expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium
          quaerat quo repellendus, voluptates.
        </td>
        <td>
          <a href="#">Edit</a>
        </td>
      </tr>
      <tr>
        <td >Mallory Hulme</td>
        <td class="text-muted" >
          Geologist IV, Support
        </td>
        <td class="text-muted" ><a href="#" class="text-reset">mhulme2@domainmarket.com</a></td>
        <td class="text-muted" >
          User
        </td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
          expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium
          quaerat quo repellendus, voluptates.
        </td>
        <td>
          <a href="#">Edit</a>
        </td>
      </tr>
      <tr>
        <td >Dunn Slane</td>
        <td class="text-muted" >
          Research Nurse, Sales
        </td>
        <td class="text-muted" ><a href="#" class="text-reset">dslane3@epa.gov</a></td>
        <td class="text-muted" >
          Owner
        </td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
          expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium
          quaerat quo repellendus, voluptates.
        </td>
        <td>
          <a href="#">Edit</a>
        </td>
      </tr>
      <tr>
        <td >Emmy Levet</td>
        <td class="text-muted" >
          VP Product Management, Accounting
        </td>
        <td class="text-muted" ><a href="#" class="text-reset">elevet4@senate.gov</a></td>
        <td class="text-muted" >
          Admin
        </td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
          expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium
          quaerat quo repellendus, voluptates.
        </td>
        <td>
          <a href="#">Edit</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Table Variants

Class	Heading	Heading
Default	Cell	Cell
Primary	Cell	Cell
Secondary	Cell	Cell
Success	Cell	Cell
Danger	Cell	Cell
Warning	Cell	Cell
Info	Cell	Cell
Light	Cell	Cell
Dark	Cell	Cell

<table class="table">
  <thead>
    <tr>
      <th scope="col">Class</th>
      <th scope="col">Heading</th>
      <th scope="col">Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Default</th>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr class="table-primary">
      <th scope="row">Primary</th>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr class="table-secondary">
      <th scope="row">Secondary</th>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr class="table-success">
      <th scope="row">Success</th>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr class="table-danger">
      <th scope="row">Danger</th>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr class="table-warning">
      <th scope="row">Warning</th>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr class="table-info">
      <th scope="row">Info</th>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr class="table-light">
      <th scope="row">Light</th>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr class="table-dark">
      <th scope="row">Dark</th>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

Documentation

Tables

Basic Table

Responsive tables

No wrap

Table Variants