Table

Organize your data with our tables.

Name Role Status
Grover Fermaint

Grover Fermaint
grover@example.com

CEO
Management
Active
Rea Budgett

Rea Budgett
rea@example.com

Technical Lead
Development
Vacation
Hunter Krohmer

Hunter Krohmer
hunter@example.com

Sales Manager
Sales
Active
</> Show code
We provided various options to simplify your data organization with table.
Tables have a basic design, to easily format your table simply add the .table class.

Responsive - Method 1#

We provided 2 methods to get a responsive table. This is the "classic" method. You simply need to wrap the .table class into a .table-responsive class.
# Name Age City Country Car
1 Paul 24 Paris France Mustang
2 Patrick 34 Nice France Renault
3 Robert 62 Limoges France Ferrari 
<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
        <th>Country</th>
        <th>Car</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Paul</td>
        <td>24</td>
        <td>Paris</td>
        <td>France</td>
        <td>Mustang</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Patrick</td>
        <td>34</td>
        <td>Nice</td>
        <td>France</td>
        <td>Renault</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Robert</td>
        <td>62</td>
        <td>Limoges</td>
        <td>France</td>
        <td>Ferrari</td>
      </tr>
    </tbody>
  </table>
</div>

Responsive - Method 2#

This method turn your thead items at the left of the table.
To make it, replace the .table-responsive class by the .table-responsive-2 class.
# Name Age City Country Car
1 Paul 24 Paris France Mustang
2 Patrick 34 Nice France Renault
3 Robert 62 Limoges France Ferrari 
<div class="table-responsive-2">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
        <th>Country</th>
        <th>Car</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Paul</td>
        <td>24</td>
        <td>Paris</td>
        <td>France</td>
        <td>Mustang</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Patrick</td>
        <td>34</td>
        <td>Nice</td>
        <td>France</td>
        <td>Renault</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Robert</td>
        <td>62</td>
        <td>Limoges</td>
        <td>France</td>
        <td>Ferrari</td>
      </tr>
    </tbody>
  </table>
</div>

Striped#

Add the .table-striped class to your table element to get a striped table.
# Name Age City
1 Paul 24 Paris
2 Patrick 34 Nice
3 Robert 62 Limoges 
<div class="table-responsive">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Paul</td>
        <td>24</td>
        <td>Paris</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Patrick</td>
        <td>34</td>
        <td>Nice</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Robert</td>
        <td>62</td>
        <td>Limoges</td>
      </tr>
    </tbody>
  </table>
</div>

Hoverable rows#

You can add a hover effect on each row with .table-hover class.
# Name Age City
1 Paul 24 Paris
2 Patrick 34 Nice
3 Robert 62 Limoges 
<div class="table-responsive">
  <table class="table table-hover">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Paul</td>
        <td>24</td>
        <td>Paris</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Patrick</td>
        <td>34</td>
        <td>Nice</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Robert</td>
        <td>62</td>
        <td>Limoges</td>
      </tr>
    </tbody>
  </table>
</div>

Bordered table#

For fully bordered table, add the .table-bordered class.
# Name Age City
1 Paul 24 Paris
2 Patrick 34 Nice
3 Robert 62 Limoges 
<div class="table-responsive">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Paul</td>
        <td>24</td>
        <td>Paris</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Patrick</td>
        <td>34</td>
        <td>Nice</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Robert</td>
        <td>62</td>
        <td>Limoges</td>
      </tr>
    </tbody>
  </table>
</div>

No borders#

You wanna disable all borders ? Okay, add the .table-no-border class.
# Name Age City
1 Paul 24 Paris
2 Patrick 34 Nice
3 Robert 62 Limoges 
<div class="table-responsive">
  <table class="table table-no-border">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Paul</td>
        <td>24</td>
        <td>Paris</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Patrick</td>
        <td>34</td>
        <td>Nice</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Robert</td>
        <td>62</td>
        <td>Limoges</td>
      </tr>
    </tbody>
  </table>
</div>

Centered table#

The .table-centered class helps you to center the data in your table.
# Name Age City
1 Paul 24 Paris
2 Patrick 34 Nice
3 Robert 62 Limoges 
<div class="table-responsive">
  <table class="table table-centered">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Paul</td>
        <td>24</td>
        <td>Paris</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Patrick</td>
        <td>34</td>
        <td>Nice</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Robert</td>
        <td>62</td>
        <td>Limoges</td>
      </tr>
    </tbody>
  </table>
</div>

With a caption#

Simply add a <caption></caption> into your table to automatically create a caption and center it at the bottom of the table.
This is a caption
# Name Age City
1 Paul 24 Paris
2 Patrick 34 Nice
3 Robert 62 Limoges 
<div class="table-responsive">
  <table class="table">
    <caption>
      This is a caption
    </caption>
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Paul</td>
        <td>24</td>
        <td>Paris</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Patrick</td>
        <td>34</td>
        <td>Nice</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Robert</td>
        <td>62</td>
        <td>Limoges</td>
      </tr>
    </tbody>
  </table>
</div>

Styling#

CSS Variable Default value Description
--ax-table-border 1px solid #d2d2d2 Table border property.