For basic styling - light padding and only horizontal dividers—add the base class .table to any . # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter < table class="table" >...< /table > Optional classes Add any of the following classes to the .table base class. .table-striped Adds zebra-striping to any table row within the < tbody > via the :nth-child CSS selector (not available in IE7-8). # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter < table class="table table-striped" >...< /table > .table-bordered Add borders and rounded corners to the table. # First Name Last Name Username 1 Mark Otto @mdo Mark Otto @TwBootstrap 2 Jacob Thornton @fat 3 Larry the Bird @twitter < table class="table table-bordered" >...< /table > .table-hover Enable a hover state on table rows within a . # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter < table class="table table-hover" >...< /table > .table-condensed Makes 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 < table class="table table-condensed" >...< /table > Optional row classes Use contextual classes to color table rows. Class Description .success Indicates a successful or positive action. .error Indicates a dangerous or potentially negative action. .warning Indicates a warning that might need attention. .info Used as an alternative to the default styles. # Product Payment Taken Status 1 TB - Monthly 01/04/2012 Approved 2 TB - Monthly 02/04/2012 Declined 3 TB - Monthly 03/04/2012 Pending 4 TB - Monthly 04/04/2012 Call in to confirm ... < tr class="success" > < td >1< /td > < td >TB - Monthly < /td > < td >01/04/2012< /td> < td >Approved< /td > < /tr >...
.table
. # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter < table class="table" >...< /table > Optional classes Add any of the following classes to the .table base class. .table-striped Adds zebra-striping to any table row within the < tbody > via the :nth-child CSS selector (not available in IE7-8). # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter < table class="table table-striped" >...< /table > .table-bordered Add borders and rounded corners to the table. # First Name Last Name Username 1 Mark Otto @mdo Mark Otto @TwBootstrap 2 Jacob Thornton @fat 3 Larry the Bird @twitter < table class="table table-bordered" >...< /table > .table-hover Enable a hover state on table rows within a . # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter < table class="table table-hover" >...< /table > .table-condensed Makes 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 < table class="table table-condensed" >...< /table > Optional row classes Use contextual classes to color table rows. Class Description .success Indicates a successful or positive action. .error Indicates a dangerous or potentially negative action. .warning Indicates a warning that might need attention. .info Used as an alternative to the default styles. # Product Payment Taken Status 1 TB - Monthly 01/04/2012 Approved 2 TB - Monthly 02/04/2012 Declined 3 TB - Monthly 03/04/2012 Pending 4 TB - Monthly 04/04/2012 Call in to confirm ... < tr class="success" > < td >1< /td > < td >TB - Monthly < /td > < td >01/04/2012< /td> < td >Approved< /td > < /tr >...
< table class="table" >...< /table >
Add any of the following classes to the .table base class.
.table-striped
Adds zebra-striping to any table row within the < tbody > via the :nth-child CSS selector (not available in IE7-8).
< tbody >
:nth-child
< table class="table table-striped" >...< /table >
.table-bordered
Add borders and rounded corners to the table.
< table class="table table-bordered" >...< /table >
.table-hover
Enable a hover state on table rows within a . # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter < table class="table table-hover" >...< /table > .table-condensed Makes 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 < table class="table table-condensed" >...< /table > Optional row classes Use contextual classes to color table rows. Class Description .success Indicates a successful or positive action. .error Indicates a dangerous or potentially negative action. .warning Indicates a warning that might need attention. .info Used as an alternative to the default styles. # Product Payment Taken Status 1 TB - Monthly 01/04/2012 Approved 2 TB - Monthly 02/04/2012 Declined 3 TB - Monthly 03/04/2012 Pending 4 TB - Monthly 04/04/2012 Call in to confirm ... < tr class="success" > < td >1< /td > < td >TB - Monthly < /td > < td >01/04/2012< /td> < td >Approved< /td > < /tr >...
. # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter < table class="table table-hover" >...< /table > .table-condensed Makes 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 < table class="table table-condensed" >...< /table > Optional row classes Use contextual classes to color table rows. Class Description .success Indicates a successful or positive action. .error Indicates a dangerous or potentially negative action. .warning Indicates a warning that might need attention. .info Used as an alternative to the default styles. # Product Payment Taken Status 1 TB - Monthly 01/04/2012 Approved 2 TB - Monthly 02/04/2012 Declined 3 TB - Monthly 03/04/2012 Pending 4 TB - Monthly 04/04/2012 Call in to confirm ... < tr class="success" > < td >1< /td > < td >TB - Monthly < /td > < td >01/04/2012< /td> < td >Approved< /td > < /tr >...
< table class="table table-hover" >...< /table >
.table-condensed
Makes tables more compact by cutting cell padding in half.
< table class="table table-condensed" >...< /table >
Use contextual classes to color table rows.
.success
.error
.warning
.info
... < tr class="success" > < td >1< /td > < td >TB - Monthly < /td > < td >01/04/2012< /td> < td >Approved< /td > < /tr >...