Tables

  • Border: 1px solid #ddd
  • Width: 100% of its container
  • Max width: 100% of its container
  • Bottom margin: 20px
  • Background color: transparent
  • Font size: same as body copy

All of the above styles are applied to tables when the table class is applied to the table element (e.g. <table class="table">).

In most situations, apply striped, condensed, and hover classes by default. (e.g. <table class="table striped condensed hover">)

Data Cells

  • Padding: 8px
  • Line height: 1.428571429 (@line-height-base)
  • Vertical align: top
  • Border-top: 1px solid #ddd
  • Font size: same as body copy

All of the above styles are applied to tables when the table class is applied to the table element (e.g. <table class="table">).

Heading Cells

Same as Data Cells except:

  • Top border: none
  • Vertical align: bottom
  • Padding: 8px
  • Border-bottom: 2px solid #ddd

All of the above styles are applied to tables when the table class is applied to the table element (e.g. <table class="table">).

Striped (alternating row colors)

Use striped tables whenever the number of rows is expected to exceed two.

Starting with the first row of data cells, every other row will be:

  • Background color: #eee (@gray-lighter)

The above style is applied to tables when the table and table-striped classes are applied to the table element (e.g. <table class="table table-striped">).

Bordered

When to use:

Apply a 2px border below the heading row and between all data rows

  • Border: 1px solid #eee (@gray-lighter)

The above style is applied to tables when the table and table-bordered classes are applied to the table element (e.g. <table class="table table-bordered">).

Condensed

When to use:

Reduces the padding in table cells (heading and data)

  • Padding: 5px

The above style is applied to tables when the table and table-bordered classes are applied to the table element (e.g. <table class="table table-bordered">).

Hover Highlighting

When to use:

Highlights data row when the mouse pointer is over them

  • Background color: #e2e2e2 (5% darker than @gray-lighter)

The above style is applied to tables when the table and table-bordered classes are applied to the table element (e.g. <table class="table table-bordered">).

Responsive

Make tables responsive by wrapping any <table class="table"> in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables. Example: <div class="table-responsive"><table class="table">...</table></div>

Examples