Less Williams

Online

Basic Tables

  1. Home
  2. Tables
  3. Basic Tables

Basic example

For basic styling—light padding and only horizontal dividers—add the base class .tableto any <table>.

# First Name Last Name Username
1 Pero Kurobola @mdo
2 Laze Dudevski @fat
3 David Kuzman @twitter

Inverse table

You can also invert the colors—with light text on dark backgrounds—with .table-dark.

# First Name Last Name Username
1 Pero Kurobola @mdo
2 Laze Dudevski @fat
3 David Kuzman @twitter

Table head options

Use one of two modifier classes to make <thead>s appear light or dark gray.

# First Name Last Name Username
1 Pero Kurobola @mdo
2 Laze Dudevski @fat
3 David Kuzman @twitter

Striped rows

Use .table-stripedto add zebra-striping to any table row within the <tbody>.

# First Name Last Name Username
1 Pero Kurobola @mdo
2 Laze Dudevski @fat
3 David Kuzman @twitter

Bordered table

Add .table-borderedfor borders on all sides of the table and cells.

# First Name Last Name Username
1 Pero Kurobola @mdo
2 Pero Kurobola @TwBootstrap
3 Laze Dudevski @fat
4 David Kuzman @twitter

Hoverable rows

Create responsive tables by wrapping any .tablein .table-responsiveto make them scroll horizontally on small devices(under 768px).

# First Name Last Name Username
1 Pero Kurobola @mdo
2 Laze Dudevski @fat
3 David Kuzman @twitter

Small table

Add .table-smto make tables more compact by cutting cell padding in half.

# First Name Last Name Username
1 Pero Kurobola @mdo
2 Laze Dudevski @fat
3 David Kuzman @twitter
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content

Contextual classes

Use contextual classes to color table rows or individual cells.

# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content

Table head options

Similar to tables and dark tables,use the modifier classes .thead-lightor .thead-darkto make <thead>s appear light or dark gray.

# First Name Last Name Username
1 Pero Kurobola @mdo
2 Laze Dudevski @fat
3 David Kuzman @twitter

Contextual classes with Background color

You can also invert the colors—with light text on dark backgrounds—with .table-dark.

# First Name Last Name Username
1 Pero Kurobola @mdo
2 Laze Dudevski @fat
3 David Kuzman @twitter

Borderless table

For basic styling—light padding and only horizontal dividers—add the base class .tableto any <table>.

# First Name Last Name Username
1 Pero Kurobola @mdo
2 Laze Dudevski @fat
3 David Kuzman @twitter

Borderless Inverse table

Your awesome text goes here.Your awesome text goes here.

# First Name Last Name Username
1 Pero Kurobola @mdo
2 Laze Dudevski @fat
3 David Kuzman @twitter