2014-03-17 03:03:53 +01:00
< div class = "bs-docs-section" >
< h1 id = "tables" class = "page-header" > Tables< / h1 >
< h2 id = "tables-example" > Basic example< / h2 >
< p > For basic styling— light padding and only horizontal dividers— add the base class < code > .table< / code > to any < code > < table> < / code > . 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.< / p >
< div class = "bs-example" >
< table class = "table" >
2014-08-02 23:49:48 +02:00
< caption > Optional table caption.< / caption >
2014-03-17 03:03:53 +01:00
< thead >
< tr >
< th > #< / th >
< th > First Name< / th >
< th > Last Name< / th >
< th > Username< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > 1< / td >
< td > Mark< / td >
< td > Otto< / td >
< td > @mdo< / td >
< / tr >
< tr >
< td > 2< / td >
< td > Jacob< / td >
< td > Thornton< / td >
< td > @fat< / td >
< / tr >
< tr >
< td > 3< / td >
< td > Larry< / td >
< td > the Bird< / td >
< td > @twitter< / td >
< / tr >
< / tbody >
< / table >
< / div > <!-- /example -->
{% highlight html %}
< table class = "table" >
...
< / table >
{% endhighlight %}
< h2 id = "tables-striped" > Striped rows< / h2 >
< p > Use < code > .table-striped< / code > to add zebra-striping to any table row within the < code > < tbody> < / code > .< / p >
< div class = "bs-callout bs-callout-danger" >
< h4 > Cross-browser compatibility< / h4 >
< p > Striped tables are styled via the < code > :nth-child< / code > CSS selector, which is not available in Internet Explorer 8.< / p >
< / div >
< div class = "bs-example" >
< table class = "table table-striped" >
< thead >
< tr >
< th > #< / th >
< th > First Name< / th >
< th > Last Name< / th >
< th > Username< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > 1< / td >
< td > Mark< / td >
< td > Otto< / td >
< td > @mdo< / td >
< / tr >
< tr >
< td > 2< / td >
< td > Jacob< / td >
< td > Thornton< / td >
< td > @fat< / td >
< / tr >
< tr >
< td > 3< / td >
< td > Larry< / td >
< td > the Bird< / td >
< td > @twitter< / td >
< / tr >
< / tbody >
< / table >
< / div > <!-- /example -->
{% highlight html %}
< table class = "table table-striped" >
...
< / table >
{% endhighlight %}
< h2 id = "tables-bordered" > Bordered table< / h2 >
< p > Add < code > .table-bordered< / code > for borders on all sides of the table and cells.< / p >
< div class = "bs-example" >
< table class = "table table-bordered" >
< thead >
< tr >
< th > #< / th >
< th > First Name< / th >
< th > Last Name< / th >
< th > Username< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td rowspan = "2" > 1< / td >
< td > Mark< / td >
< td > Otto< / td >
< td > @mdo< / td >
< / tr >
< tr >
< td > Mark< / td >
< td > Otto< / td >
< td > @TwBootstrap< / td >
< / tr >
< tr >
< td > 2< / td >
< td > Jacob< / td >
< td > Thornton< / td >
< td > @fat< / td >
< / tr >
< tr >
< td > 3< / td >
< td colspan = "2" > Larry the Bird< / td >
< td > @twitter< / td >
< / tr >
< / tbody >
< / table >
< / div > <!-- /example -->
{% highlight html %}
< table class = "table table-bordered" >
...
< / table >
{% endhighlight %}
< h2 id = "tables-hover-rows" > Hover rows< / h2 >
< p > Add < code > .table-hover< / code > to enable a hover state on table rows within a < code > < tbody> < / code > .< / p >
< div class = "bs-example" >
< table class = "table table-hover" >
< thead >
< tr >
< th > #< / th >
< th > First Name< / th >
< th > Last Name< / th >
< th > Username< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > 1< / td >
< td > Mark< / td >
< td > Otto< / td >
< td > @mdo< / td >
< / tr >
< tr >
< td > 2< / td >
< td > Jacob< / td >
< td > Thornton< / td >
< td > @fat< / td >
< / tr >
< tr >
< td > 3< / td >
< td colspan = "2" > Larry the Bird< / td >
< td > @twitter< / td >
< / tr >
< / tbody >
< / table >
< / div > <!-- /example -->
{% highlight html %}
< table class = "table table-hover" >
...
< / table >
{% endhighlight %}
< h2 id = "tables-condensed" > Condensed table< / h2 >
< p > Add < code > .table-condensed< / code > to make tables more compact by cutting cell padding in half.< / p >
< div class = "bs-example" >
< table class = "table table-condensed" >
< thead >
< tr >
< th > #< / th >
< th > First Name< / th >
< th > Last Name< / th >
< th > Username< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > 1< / td >
< td > Mark< / td >
< td > Otto< / td >
< td > @mdo< / td >
< / tr >
< tr >
< td > 2< / td >
< td > Jacob< / td >
< td > Thornton< / td >
< td > @fat< / td >
< / tr >
< tr >
< td > 3< / td >
< td colspan = "2" > Larry the Bird< / td >
< td > @twitter< / td >
< / tr >
< / tbody >
< / table >
< / div > <!-- /example -->
{% highlight html %}
< table class = "table table-condensed" >
...
< / table >
{% endhighlight %}
< h2 id = "tables-contextual-classes" > Contextual classes< / h2 >
< p > Use contextual classes to color table rows or individual cells.< / p >
< div class = "table-responsive" >
< table class = "table table-bordered table-striped" >
< colgroup >
< col class = "col-xs-1" >
< col class = "col-xs-7" >
< / colgroup >
< thead >
< tr >
< th > Class< / th >
< th > Description< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td >
< code > .active< / code >
< / td >
< td > Applies the hover color to a particular row or cell< / td >
< / tr >
< tr >
< td >
< code > .success< / code >
< / td >
< td > Indicates a successful or positive action< / td >
< / tr >
< tr >
< td >
< code > .info< / code >
< / td >
< td > Indicates a neutral informative change or action< / td >
< / tr >
< tr >
< td >
< code > .warning< / code >
< / td >
< td > Indicates a warning that might need attention< / td >
< / tr >
< tr >
< td >
< code > .danger< / code >
< / td >
< td > Indicates a dangerous or potentially negative action< / td >
< / tr >
< / tbody >
< / table >
< / div >
< div class = "bs-example" >
< table class = "table" >
< thead >
< tr >
< th > #< / th >
< th > Column heading< / th >
< th > Column heading< / th >
< th > Column heading< / th >
< / tr >
< / thead >
< tbody >
< tr class = "active" >
< td > 1< / td >
< td > Column content< / td >
< td > Column content< / td >
< td > Column content< / td >
< / tr >
< tr >
< td > 2< / td >
< td > Column content< / td >
< td > Column content< / td >
< td > Column content< / td >
< / tr >
< tr class = "success" >
< td > 3< / td >
< td > Column content< / td >
< td > Column content< / td >
< td > Column content< / td >
< / tr >
< tr >
< td > 4< / td >
< td > Column content< / td >
< td > Column content< / td >
< td > Column content< / td >
< / tr >
< tr class = "info" >
< td > 5< / td >
< td > Column content< / td >
< td > Column content< / td >
< td > Column content< / td >
< / tr >
< tr >
< td > 6< / td >
< td > Column content< / td >
< td > Column content< / td >
< td > Column content< / td >
< / tr >
< tr class = "warning" >
< td > 7< / td >
< td > Column content< / td >
< td > Column content< / td >
< td > Column content< / td >
< / tr >
< tr >
< td > 8< / td >
< td > Column content< / td >
< td > Column content< / td >
< td > Column content< / td >
< / tr >
< tr class = "danger" >
< td > 9< / td >
< td > Column content< / td >
< td > Column content< / td >
< td > Column content< / td >
< / tr >
< / tbody >
< / table >
< / div > <!-- /example -->
{% highlight html %}
<!-- On rows -->
< tr class = "active" > ...< / tr >
< tr class = "success" > ...< / tr >
< tr class = "warning" > ...< / tr >
< tr class = "danger" > ...< / tr >
< tr class = "info" > ...< / tr >
<!-- On cells (`td` or `th`) -->
< tr >
< td class = "active" > ...< / td >
< td class = "success" > ...< / td >
< td class = "warning" > ...< / td >
< td class = "danger" > ...< / td >
< td class = "info" > ...< / td >
< / tr >
{% endhighlight %}
< h2 id = "tables-responsive" > Responsive tables< / h2 >
2014-04-06 00:33:57 +02:00
< p > Create responsive tables by wrapping any < code > .table< / code > in < code > .table-responsive< / code > 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.< / p >
2014-05-23 06:12:13 +02:00
< div class = "bs-callout bs-callout-warning" >
< h4 > Firefox and fieldsets< / h4 >
2014-05-23 06:39:47 +02:00
< p > Firefox has some awkward fieldset styling involving < code > width< / code > that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we < strong > don't< / strong > provide in Bootstrap:< / p >
2014-05-23 06:12:13 +02:00
{% highlight css %}
@-moz-document url-prefix() {
2014-05-23 06:39:47 +02:00
fieldset { display: table-cell; }
2014-05-23 06:12:13 +02:00
}
{% endhighlight %}
< p > For more information, read < a href = "http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685" > this Stack Overflow answer< / a > .< / p >
< / div >
2014-03-17 03:03:53 +01:00
< div class = "bs-example" >
< div class = "table-responsive" >
< table class = "table" >
< thead >
< tr >
< th > #< / th >
< th > Table heading< / th >
< th > Table heading< / th >
< th > Table heading< / th >
< th > Table heading< / th >
< th > Table heading< / th >
< th > Table heading< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > 1< / td >
< td > Table cell< / td >
< td > Table cell< / td >
< td > Table cell< / td >
< td > Table cell< / td >
< td > Table cell< / td >
< td > Table cell< / td >
< / tr >
< tr >
< td > 2< / td >
< td > Table cell< / td >
< td > Table cell< / td >
< td > Table cell< / td >
< td > Table cell< / td >
< td > Table cell< / td >
< td > Table cell< / td >
< / tr >
< tr >
< td > 3< / td >
< td > Table cell< / td >
< td > Table cell< / td >
< td > Table cell< / td >
< td > Table cell< / td >
< td > Table cell< / td >
< td > Table cell< / td >
< / tr >
< / tbody >
< / table >
< / div > <!-- /.table - responsive -->
< div class = "table-responsive" >
< table class = "table table-bordered" >
< thead >
< tr >
< th > #< / th >
< th > Table heading< / th >
< th > Table heading< / th >
< th > Table heading< / th >
< th > Table heading< / th >
< th > Table heading< / th >
< th > Table heading< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > 1< / td >
< td > Table cell< / td >
< td > Table cell< / td >
< td > Table cell< / td >
< td > Table cell< / td >
< td > Table cell< / td >
< td > Table cell< / td >
< / tr >
< tr >
< td > 2< / td >
< td > Table cell< / td >
< td > Table cell< / td >
< td > Table cell< / td >
< td > Table cell< / td >
< td > Table cell< / td >
< td > Table cell< / td >
< / tr >
< tr >
< td > 3< / td >
< td > Table cell< / td >
< td > Table cell< / td >
< td > Table cell< / td >
< td > Table cell< / td >
< td > Table cell< / td >
< td > Table cell< / td >
< / tr >
< / tbody >
< / table >
< / div > <!-- /.table - responsive -->
< / div > <!-- /example -->
{% highlight html %}
< div class = "table-responsive" >
< table class = "table" >
...
< / table >
< / div >
{% endhighlight %}
< / div >
