Basic example

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Striped rows

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

Cross-browser compatibility

Striped tables are styled via the :nth-child CSS selector, which is not available in Internet Explorer 8.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Bordered table

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

# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Hover rows

Add .table-hover to enable a hover state on table rows within a <tbody>.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Condensed table

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

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

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

Responsive tables

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
Star Name Pada 8th sign Star Pada Sign
Aswini 1st Visaka 4th Scorpio
Aswini 2nd Anuradha 1st Scorpio
Aswini 3rd Anuradha 2nd Scorpio
Aswini 4th Anuradha 3rd Scorpio
Bharani 1st Anuradha 4th Scorpio
Bharani 2nd Jyestha 1st Scorpio
Bharani 3rd Jyestha 2nd Scorpio
Bharani 4th Jyestha 3rd Scorpio
Krittika 1st Jyestha 4th Scorpio
Krittika 2nd Moola 1st sagittarius
Krittika 3rd Moola 2nd sagittarius
Krittika 4th Moola 3rd sagittarius
Rohini 1st Moola 4th sagittarius
Rohini 2nd Purvasadha 1st sagittarius
Rohini 3rd Purvasadha 2nd sagittarius
Rohini 4th Purvasadha 3rd sagittarius
Mirqasira 1st Purvasadha 4th sagittarius
Mirqasira 2nd Uttarsadha 1st sagittarius
Mirqasira 3rd Uttarsadha 2nd sagittarius
Mirqasira 4th Uttarsadha 3rd sagittarius
Ardra 1st Uttarsadha 4th Capricorn
Ardra 2nd Sravana 1st Capricorn
Ardra 3rd Sravana 2nd Capricorn
Ardra 4th Sravana 3rd Capricorn
Punarvasu 1st Sravana 4th Capricorn
Punarvasu 2nd Dhanistha 1st Capricorn
Punarvasu 3rd Dhanistha 2nd Capricorn
Punarvasu 4th Dhanistha 3rd Aquarius
Aslesha 1st Dhanistha 4th Aquarius
Aslesha 2nd Satabhisha 1st Aquarius
Aslesha 3rd Satabhisha 2nd Aquarius
Aslesha 4th Satabhisha 3rd Aquarius