Tables

Brandaris uses a clean and simple styling for tables. All styles can be easily combined to display your ultimate table.

Default table

Using the most basic table markup, here’s how .table-based tables look in Brandaris.

#	First Name	Last Name	Username
1	Jack	Smith	j.smith
2	Eve	Ning	e.ning
3	Lee	Amos	l.amos

<table class="table mb-2">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Jack</td>
      <td>Smith</td>
      <td>j.smith</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Eve</td>
      <td>Ning</td>
      <td>e.ning</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Lee</td>
      <td>Amos</td>
      <td>l.amos</td>
    </tr>
  </tbody>
</table>

Borderless table

Don’t you like borders? Just add .table-borderless and they will be gone.

#	First Name	Last Name	Username
1	Jack	Smith	j.smith
2	Eve	Ning	e.ning
3	Lee	Amos	l.amos

<table class="table table-borderless mb-2">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Jack</td>
      <td>Smith</td>
      <td>j.smith</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Eve</td>
      <td>Ning</td>
      <td>e.ning</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Lee</td>
      <td>Amos</td>
      <td>l.amos</td>
    </tr>
  </tbody>
</table>

Striped table

Large tables are easier to parse visually if rows are easily distinguishable. You can add striped rows by adding .table-striped to your .table-based tables.

#	First Name	Last Name	Username
1	Jack	Smith	j.smith
2	Eve	Ning	e.ning
3	Lee	Amos	l.amos

<table class="table table-striped mb-2">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Jack</td>
      <td>Smith</td>
      <td>j.smith</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Eve</td>
      <td>Ning</td>
      <td>e.ning</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Lee</td>
      <td>Amos</td>
      <td>l.amos</td>
    </tr>
  </tbody>
</table>

Full width table

Sometimes you want a table to cover the full width of their parent element. You can acomplish this by adding .table-full to your .table-based tables.

#	First Name	Last Name	Username
1	Jack	Smith	j.smith
2	Eve	Ning	e.ning
3	Lee	Amos	l.amos

<table class="table table-full mb-2">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Jack</td>
      <td>Smith</td>
      <td>j.smith</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Eve</td>
      <td>Ning</td>
      <td>e.ning</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Lee</td>
      <td>Amos</td>
      <td>l.amos</td>
    </tr>
  </tbody>
</table>

Hoverable table

You can easily go trough tables when you can hover them. Add .table-hover to your .table-based tables to get hoverable tables.

#	First Name	Last Name	Username
1	Jack	Smith	j.smith
2	Eve	Ning	e.ning
3	Lee	Amos	l.amos

<table class="table table-hover mb-2">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Jack</td>
      <td>Smith</td>
      <td>j.smith</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Eve</td>
      <td>Ning</td>
      <td>e.ning</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Lee</td>
      <td>Amos</td>
      <td>l.amos</td>
    </tr>
  </tbody>
</table>

Colored table

Make your tables sparkle with .table-colored!

#	First Name	Last Name	Username
1	Jack	Smith	j.smith
2	Eve	Ning	e.ning
3	Lee	Amos	l.amos

<table class="table table-colored mb-2">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Jack</td>
      <td>Smith</td>
      <td>j.smith</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Eve</td>
      <td>Ning</td>
      <td>e.ning</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Lee</td>
      <td>Amos</td>
      <td>l.amos</td>
    </tr>
  </tbody>
</table>

Responsive tables

You can wrap your tables in .table-responsive for responsive tables.

#	First Name	Last Name	Username	Phone	E-mail	Street address	City	Postal / Zip	Country	Company
1	Jack	Smith	j.smith	+31397406593	pretium.et@eratvitaerisus.edu	739-9801 Class St.	Zittau	3955	Swaziland	Dapibus Id Blandit PC
2	Eve	Ning	e.ning	+31971126991	sagittis.Duis.gravida@vitae.ca	P.O. Box 745, 3358 Consequat St.	Eindhoven	45838	Germany	Risus Nunc PC
3	Lee	Amos	l.amos	+31935644470	dolor.vitae@ornaretortorat.co.uk	788-6718 Pede Rd.	Upper Hutt	0599HK	Peru	Blandit Consulting

<div class="table-responsive mb-2">
  <table class="table table-full">
    ...
  </table>
</div>

On this page

Components