Tables

Basic

A basic table without any styling can be created with just the standard <table> tag and accompanying elements.

<table>
   ...
</table>

Styled

A styled table with padding and borders can be created by using the .table class. We have isolated custom table styles into their own class because many JavaScript plugins use tables, and we wanted to avoid styling conflicts.

<table class="table">
   ...
</table>

Full-Width

To create a table that takes up 100% the width of its parent element, simply add the class .table-full.

<table class="table table-full">
   ...
</table>

Responsive Container

When you have a table with a lot of columns, you may not want to hide columns conditionally or shrink them down to the point where they are unreadable. By wrapping a table in the .table-responsive class, the size of the table remains the same and a horizontal scroll bar will show up, allowing users to scroll horizontally to view all of the information.

Try resizing the browser and see how the table below changes.

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