0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-05 17:24:20 +01:00
Bootstrap/docs/content/tables.md

612 lines
13 KiB
Markdown
Raw Normal View History

2014-07-12 07:34:47 +02:00
---
layout: docs
2014-07-12 07:34:47 +02:00
title: Tables
2015-08-10 08:38:16 +02:00
group: content
2014-07-12 07:34:47 +02:00
---
2014-12-30 21:47:04 +01:00
Due to the widespread use of tables across third-party widgets like calendars and date pickers, we've designed our tables to be **opt-in**. Just add the base class `.table` to any `<table>`.
2014-07-12 07:34:47 +02:00
2015-05-29 10:58:52 +02:00
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
2014-07-12 07:34:47 +02:00
## Basic example
{% example html %}
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
2014-12-01 06:01:50 +01:00
<th scope="row">1</th>
2014-07-12 07:34:47 +02:00
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
2014-12-01 06:01:50 +01:00
<th scope="row">2</th>
2014-07-12 07:34:47 +02:00
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
2014-12-01 06:01:50 +01:00
<th scope="row">3</th>
2014-07-12 07:34:47 +02:00
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
{% endexample %}
2014-07-14 09:23:46 +02:00
## Inverse table
{% example html %}
<table class="table table-inverse">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
2014-12-01 06:01:50 +01:00
<th scope="row">1</th>
2014-07-14 09:23:46 +02:00
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
2014-12-01 06:01:50 +01:00
<th scope="row">2</th>
2014-07-14 09:23:46 +02:00
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
2014-12-01 06:01:50 +01:00
<th scope="row">3</th>
2014-07-14 09:23:46 +02:00
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
{% endexample %}
2014-07-14 08:45:34 +02:00
## Table head options
Use one of two modifier classes to make `<thead>`s appear light or dark gray.
{% example html %}
<table class="table">
<thead class="thead-inverse">
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
2014-12-01 06:01:50 +01:00
<th scope="row">1</th>
2014-07-14 08:45:34 +02:00
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
2014-12-01 06:01:50 +01:00
<th scope="row">2</th>
2014-07-14 08:45:34 +02:00
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
2014-12-01 06:01:50 +01:00
<th scope="row">3</th>
2014-07-14 08:45:34 +02:00
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<table class="table">
2014-07-14 08:45:34 +02:00
<thead class="thead-default">
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
2014-12-01 06:01:50 +01:00
<th scope="row">1</th>
2014-07-14 08:45:34 +02:00
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
2014-12-01 06:01:50 +01:00
<th scope="row">2</th>
2014-07-14 08:45:34 +02:00
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
2014-12-01 06:01:50 +01:00
<th scope="row">3</th>
2014-07-14 08:45:34 +02:00
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
{% endexample %}
2014-07-12 07:34:47 +02:00
## Striped rows
Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`.
{% example html %}
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
2014-12-01 06:01:50 +01:00
<th scope="row">1</th>
2014-07-12 07:34:47 +02:00
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
2014-12-01 06:01:50 +01:00
<th scope="row">2</th>
2014-07-12 07:34:47 +02:00
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
2014-12-01 06:01:50 +01:00
<th scope="row">3</th>
2014-07-12 07:34:47 +02:00
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
{% endexample %}
## Bordered table
Add `.table-bordered` for borders on all sides of the table and cells.
{% example html %}
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
2014-07-12 07:34:47 +02:00
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
2014-07-12 07:34:47 +02:00
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
2014-12-01 06:01:50 +01:00
<th scope="row">3</th>
2014-07-12 07:34:47 +02:00
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
2014-12-01 06:01:50 +01:00
<th scope="row">4</th>
2014-07-12 07:34:47 +02:00
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
{% endexample %}
## Hoverable rows
Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
{% example html %}
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
2014-12-01 06:01:50 +01:00
<th scope="row">1</th>
2014-07-12 07:34:47 +02:00
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
2014-12-01 06:01:50 +01:00
<th scope="row">2</th>
2014-07-12 07:34:47 +02:00
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
2014-12-01 06:01:50 +01:00
<th scope="row">3</th>
2014-07-12 07:34:47 +02:00
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
{% endexample %}
2014-09-18 07:14:27 +02:00
## Small table
2014-07-12 07:34:47 +02:00
2014-09-18 07:14:27 +02:00
Add `.table-sm` to make tables more compact by cutting cell padding in half.
2014-07-12 07:34:47 +02:00
{% example html %}
2014-09-18 07:14:27 +02:00
<table class="table table-sm">
2014-07-12 07:34:47 +02:00
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
2014-12-01 06:01:50 +01:00
<th scope="row">1</th>
2014-07-12 07:34:47 +02:00
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
2014-12-01 06:01:50 +01:00
<th scope="row">2</th>
2014-07-12 07:34:47 +02:00
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
2014-12-01 06:01:50 +01:00
<th scope="row">3</th>
2014-07-12 07:34:47 +02:00
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
{% endexample %}
## Contextual classes
Use contextual classes to color table rows or individual cells.
<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>
2014-12-01 06:01:50 +01:00
<th scope="row">
<code>.table-active</code>
Merge branch 'master' into v4 Conflicts: Gruntfile.js _config.yml dist/css/bootstrap-theme.css dist/css/bootstrap-theme.min.css dist/css/bootstrap.css dist/css/bootstrap.css.map dist/css/bootstrap.min.css dist/fonts/glyphicons-halflings-regular.eot dist/fonts/glyphicons-halflings-regular.svg dist/fonts/glyphicons-halflings-regular.ttf dist/fonts/glyphicons-halflings-regular.woff docs/_data/glyphicons.yml docs/_includes/components/alerts.html docs/_includes/components/badges.html docs/_includes/components/button-dropdowns.html docs/_includes/components/button-groups.html docs/_includes/components/dropdowns.html docs/_includes/components/glyphicons.html docs/_includes/components/input-groups.html docs/_includes/components/labels.html docs/_includes/components/media.html docs/_includes/components/navbar.html docs/_includes/components/navs.html docs/_includes/components/pagination.html docs/_includes/components/panels.html docs/_includes/components/progress-bars.html docs/_includes/css/buttons.html docs/_includes/css/forms.html docs/_includes/css/grid.html docs/_includes/css/helpers.html docs/_includes/css/images.html docs/_includes/css/less.html docs/_includes/css/responsive-utilities.html docs/_includes/css/sass.html docs/_includes/css/tables.html docs/_includes/css/type.html docs/_includes/getting-started/accessibility.html docs/_includes/getting-started/browser-device-support.html docs/_includes/getting-started/community.html docs/_includes/getting-started/download.html docs/_includes/getting-started/examples.html docs/_includes/getting-started/whats-included.html docs/_includes/js/affix.html docs/_includes/js/alerts.html docs/_includes/js/buttons.html docs/_includes/js/carousel.html docs/_includes/js/collapse.html docs/_includes/js/dropdowns.html docs/_includes/js/modal.html docs/_includes/js/overview.html docs/_includes/js/tabs.html docs/_includes/nav/components.html docs/_includes/nav/css.html docs/_includes/nav/javascript.html docs/_includes/nav/main.html docs/about.html docs/assets/css/docs.min.css docs/assets/js/customize.min.js docs/assets/js/raw-files.min.js docs/dist/css/bootstrap-theme.css docs/dist/css/bootstrap-theme.min.css docs/dist/css/bootstrap.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css docs/dist/fonts/glyphicons-halflings-regular.eot docs/dist/fonts/glyphicons-halflings-regular.svg docs/dist/fonts/glyphicons-halflings-regular.ttf docs/dist/fonts/glyphicons-halflings-regular.woff docs/examples/carousel/index.html docs/examples/navbar-fixed-top/index.html docs/examples/navbar-static-top/index.html docs/examples/navbar/index.html docs/examples/non-responsive/index.html docs/examples/non-responsive/non-responsive.css docs/examples/sticky-footer-navbar/index.html docs/examples/theme/index.html fonts/glyphicons-halflings-regular.eot fonts/glyphicons-halflings-regular.svg fonts/glyphicons-halflings-regular.ttf fonts/glyphicons-halflings-regular.woff less/_carousel.less less/_forms.less less/glyphicons.less
2014-12-01 05:17:45 +01:00
</th>
2014-07-12 07:34:47 +02:00
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
2014-12-01 06:01:50 +01:00
<th scope="row">
<code>.table-success</code>
Merge branch 'master' into v4 Conflicts: Gruntfile.js _config.yml dist/css/bootstrap-theme.css dist/css/bootstrap-theme.min.css dist/css/bootstrap.css dist/css/bootstrap.css.map dist/css/bootstrap.min.css dist/fonts/glyphicons-halflings-regular.eot dist/fonts/glyphicons-halflings-regular.svg dist/fonts/glyphicons-halflings-regular.ttf dist/fonts/glyphicons-halflings-regular.woff docs/_data/glyphicons.yml docs/_includes/components/alerts.html docs/_includes/components/badges.html docs/_includes/components/button-dropdowns.html docs/_includes/components/button-groups.html docs/_includes/components/dropdowns.html docs/_includes/components/glyphicons.html docs/_includes/components/input-groups.html docs/_includes/components/labels.html docs/_includes/components/media.html docs/_includes/components/navbar.html docs/_includes/components/navs.html docs/_includes/components/pagination.html docs/_includes/components/panels.html docs/_includes/components/progress-bars.html docs/_includes/css/buttons.html docs/_includes/css/forms.html docs/_includes/css/grid.html docs/_includes/css/helpers.html docs/_includes/css/images.html docs/_includes/css/less.html docs/_includes/css/responsive-utilities.html docs/_includes/css/sass.html docs/_includes/css/tables.html docs/_includes/css/type.html docs/_includes/getting-started/accessibility.html docs/_includes/getting-started/browser-device-support.html docs/_includes/getting-started/community.html docs/_includes/getting-started/download.html docs/_includes/getting-started/examples.html docs/_includes/getting-started/whats-included.html docs/_includes/js/affix.html docs/_includes/js/alerts.html docs/_includes/js/buttons.html docs/_includes/js/carousel.html docs/_includes/js/collapse.html docs/_includes/js/dropdowns.html docs/_includes/js/modal.html docs/_includes/js/overview.html docs/_includes/js/tabs.html docs/_includes/nav/components.html docs/_includes/nav/css.html docs/_includes/nav/javascript.html docs/_includes/nav/main.html docs/about.html docs/assets/css/docs.min.css docs/assets/js/customize.min.js docs/assets/js/raw-files.min.js docs/dist/css/bootstrap-theme.css docs/dist/css/bootstrap-theme.min.css docs/dist/css/bootstrap.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css docs/dist/fonts/glyphicons-halflings-regular.eot docs/dist/fonts/glyphicons-halflings-regular.svg docs/dist/fonts/glyphicons-halflings-regular.ttf docs/dist/fonts/glyphicons-halflings-regular.woff docs/examples/carousel/index.html docs/examples/navbar-fixed-top/index.html docs/examples/navbar-static-top/index.html docs/examples/navbar/index.html docs/examples/non-responsive/index.html docs/examples/non-responsive/non-responsive.css docs/examples/sticky-footer-navbar/index.html docs/examples/theme/index.html fonts/glyphicons-halflings-regular.eot fonts/glyphicons-halflings-regular.svg fonts/glyphicons-halflings-regular.ttf fonts/glyphicons-halflings-regular.woff less/_carousel.less less/_forms.less less/glyphicons.less
2014-12-01 05:17:45 +01:00
</th>
2014-07-12 07:34:47 +02:00
<td>Indicates a successful or positive action</td>
</tr>
<tr>
2014-12-01 06:01:50 +01:00
<th scope="row">
<code>.table-info</code>
Merge branch 'master' into v4 Conflicts: Gruntfile.js _config.yml dist/css/bootstrap-theme.css dist/css/bootstrap-theme.min.css dist/css/bootstrap.css dist/css/bootstrap.css.map dist/css/bootstrap.min.css dist/fonts/glyphicons-halflings-regular.eot dist/fonts/glyphicons-halflings-regular.svg dist/fonts/glyphicons-halflings-regular.ttf dist/fonts/glyphicons-halflings-regular.woff docs/_data/glyphicons.yml docs/_includes/components/alerts.html docs/_includes/components/badges.html docs/_includes/components/button-dropdowns.html docs/_includes/components/button-groups.html docs/_includes/components/dropdowns.html docs/_includes/components/glyphicons.html docs/_includes/components/input-groups.html docs/_includes/components/labels.html docs/_includes/components/media.html docs/_includes/components/navbar.html docs/_includes/components/navs.html docs/_includes/components/pagination.html docs/_includes/components/panels.html docs/_includes/components/progress-bars.html docs/_includes/css/buttons.html docs/_includes/css/forms.html docs/_includes/css/grid.html docs/_includes/css/helpers.html docs/_includes/css/images.html docs/_includes/css/less.html docs/_includes/css/responsive-utilities.html docs/_includes/css/sass.html docs/_includes/css/tables.html docs/_includes/css/type.html docs/_includes/getting-started/accessibility.html docs/_includes/getting-started/browser-device-support.html docs/_includes/getting-started/community.html docs/_includes/getting-started/download.html docs/_includes/getting-started/examples.html docs/_includes/getting-started/whats-included.html docs/_includes/js/affix.html docs/_includes/js/alerts.html docs/_includes/js/buttons.html docs/_includes/js/carousel.html docs/_includes/js/collapse.html docs/_includes/js/dropdowns.html docs/_includes/js/modal.html docs/_includes/js/overview.html docs/_includes/js/tabs.html docs/_includes/nav/components.html docs/_includes/nav/css.html docs/_includes/nav/javascript.html docs/_includes/nav/main.html docs/about.html docs/assets/css/docs.min.css docs/assets/js/customize.min.js docs/assets/js/raw-files.min.js docs/dist/css/bootstrap-theme.css docs/dist/css/bootstrap-theme.min.css docs/dist/css/bootstrap.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css docs/dist/fonts/glyphicons-halflings-regular.eot docs/dist/fonts/glyphicons-halflings-regular.svg docs/dist/fonts/glyphicons-halflings-regular.ttf docs/dist/fonts/glyphicons-halflings-regular.woff docs/examples/carousel/index.html docs/examples/navbar-fixed-top/index.html docs/examples/navbar-static-top/index.html docs/examples/navbar/index.html docs/examples/non-responsive/index.html docs/examples/non-responsive/non-responsive.css docs/examples/sticky-footer-navbar/index.html docs/examples/theme/index.html fonts/glyphicons-halflings-regular.eot fonts/glyphicons-halflings-regular.svg fonts/glyphicons-halflings-regular.ttf fonts/glyphicons-halflings-regular.woff less/_carousel.less less/_forms.less less/glyphicons.less
2014-12-01 05:17:45 +01:00
</th>
2014-07-12 07:34:47 +02:00
<td>Indicates a neutral informative change or action</td>
</tr>
<tr>
2014-12-01 06:01:50 +01:00
<th scope="row">
<code>.table-warning</code>
Merge branch 'master' into v4 Conflicts: Gruntfile.js _config.yml dist/css/bootstrap-theme.css dist/css/bootstrap-theme.min.css dist/css/bootstrap.css dist/css/bootstrap.css.map dist/css/bootstrap.min.css dist/fonts/glyphicons-halflings-regular.eot dist/fonts/glyphicons-halflings-regular.svg dist/fonts/glyphicons-halflings-regular.ttf dist/fonts/glyphicons-halflings-regular.woff docs/_data/glyphicons.yml docs/_includes/components/alerts.html docs/_includes/components/badges.html docs/_includes/components/button-dropdowns.html docs/_includes/components/button-groups.html docs/_includes/components/dropdowns.html docs/_includes/components/glyphicons.html docs/_includes/components/input-groups.html docs/_includes/components/labels.html docs/_includes/components/media.html docs/_includes/components/navbar.html docs/_includes/components/navs.html docs/_includes/components/pagination.html docs/_includes/components/panels.html docs/_includes/components/progress-bars.html docs/_includes/css/buttons.html docs/_includes/css/forms.html docs/_includes/css/grid.html docs/_includes/css/helpers.html docs/_includes/css/images.html docs/_includes/css/less.html docs/_includes/css/responsive-utilities.html docs/_includes/css/sass.html docs/_includes/css/tables.html docs/_includes/css/type.html docs/_includes/getting-started/accessibility.html docs/_includes/getting-started/browser-device-support.html docs/_includes/getting-started/community.html docs/_includes/getting-started/download.html docs/_includes/getting-started/examples.html docs/_includes/getting-started/whats-included.html docs/_includes/js/affix.html docs/_includes/js/alerts.html docs/_includes/js/buttons.html docs/_includes/js/carousel.html docs/_includes/js/collapse.html docs/_includes/js/dropdowns.html docs/_includes/js/modal.html docs/_includes/js/overview.html docs/_includes/js/tabs.html docs/_includes/nav/components.html docs/_includes/nav/css.html docs/_includes/nav/javascript.html docs/_includes/nav/main.html docs/about.html docs/assets/css/docs.min.css docs/assets/js/customize.min.js docs/assets/js/raw-files.min.js docs/dist/css/bootstrap-theme.css docs/dist/css/bootstrap-theme.min.css docs/dist/css/bootstrap.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css docs/dist/fonts/glyphicons-halflings-regular.eot docs/dist/fonts/glyphicons-halflings-regular.svg docs/dist/fonts/glyphicons-halflings-regular.ttf docs/dist/fonts/glyphicons-halflings-regular.woff docs/examples/carousel/index.html docs/examples/navbar-fixed-top/index.html docs/examples/navbar-static-top/index.html docs/examples/navbar/index.html docs/examples/non-responsive/index.html docs/examples/non-responsive/non-responsive.css docs/examples/sticky-footer-navbar/index.html docs/examples/theme/index.html fonts/glyphicons-halflings-regular.eot fonts/glyphicons-halflings-regular.svg fonts/glyphicons-halflings-regular.ttf fonts/glyphicons-halflings-regular.woff less/_carousel.less less/_forms.less less/glyphicons.less
2014-12-01 05:17:45 +01:00
</th>
2014-07-12 07:34:47 +02:00
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
2014-12-01 06:01:50 +01:00
<th scope="row">
<code>.table-danger</code>
Merge branch 'master' into v4 Conflicts: Gruntfile.js _config.yml dist/css/bootstrap-theme.css dist/css/bootstrap-theme.min.css dist/css/bootstrap.css dist/css/bootstrap.css.map dist/css/bootstrap.min.css dist/fonts/glyphicons-halflings-regular.eot dist/fonts/glyphicons-halflings-regular.svg dist/fonts/glyphicons-halflings-regular.ttf dist/fonts/glyphicons-halflings-regular.woff docs/_data/glyphicons.yml docs/_includes/components/alerts.html docs/_includes/components/badges.html docs/_includes/components/button-dropdowns.html docs/_includes/components/button-groups.html docs/_includes/components/dropdowns.html docs/_includes/components/glyphicons.html docs/_includes/components/input-groups.html docs/_includes/components/labels.html docs/_includes/components/media.html docs/_includes/components/navbar.html docs/_includes/components/navs.html docs/_includes/components/pagination.html docs/_includes/components/panels.html docs/_includes/components/progress-bars.html docs/_includes/css/buttons.html docs/_includes/css/forms.html docs/_includes/css/grid.html docs/_includes/css/helpers.html docs/_includes/css/images.html docs/_includes/css/less.html docs/_includes/css/responsive-utilities.html docs/_includes/css/sass.html docs/_includes/css/tables.html docs/_includes/css/type.html docs/_includes/getting-started/accessibility.html docs/_includes/getting-started/browser-device-support.html docs/_includes/getting-started/community.html docs/_includes/getting-started/download.html docs/_includes/getting-started/examples.html docs/_includes/getting-started/whats-included.html docs/_includes/js/affix.html docs/_includes/js/alerts.html docs/_includes/js/buttons.html docs/_includes/js/carousel.html docs/_includes/js/collapse.html docs/_includes/js/dropdowns.html docs/_includes/js/modal.html docs/_includes/js/overview.html docs/_includes/js/tabs.html docs/_includes/nav/components.html docs/_includes/nav/css.html docs/_includes/nav/javascript.html docs/_includes/nav/main.html docs/about.html docs/assets/css/docs.min.css docs/assets/js/customize.min.js docs/assets/js/raw-files.min.js docs/dist/css/bootstrap-theme.css docs/dist/css/bootstrap-theme.min.css docs/dist/css/bootstrap.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css docs/dist/fonts/glyphicons-halflings-regular.eot docs/dist/fonts/glyphicons-halflings-regular.svg docs/dist/fonts/glyphicons-halflings-regular.ttf docs/dist/fonts/glyphicons-halflings-regular.woff docs/examples/carousel/index.html docs/examples/navbar-fixed-top/index.html docs/examples/navbar-static-top/index.html docs/examples/navbar/index.html docs/examples/non-responsive/index.html docs/examples/non-responsive/non-responsive.css docs/examples/sticky-footer-navbar/index.html docs/examples/theme/index.html fonts/glyphicons-halflings-regular.eot fonts/glyphicons-halflings-regular.svg fonts/glyphicons-halflings-regular.ttf fonts/glyphicons-halflings-regular.woff less/_carousel.less less/_forms.less less/glyphicons.less
2014-12-01 05:17:45 +01:00
</th>
2014-07-12 07:34:47 +02:00
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
</div>
<div class="bd-example">
2014-07-12 07:34:47 +02:00
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
2014-12-01 06:01:50 +01:00
<th scope="row">1</th>
2014-07-12 07:34:47 +02:00
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
2014-12-01 06:01:50 +01:00
<th scope="row">2</th>
2014-07-12 07:34:47 +02:00
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-success">
2014-12-01 06:01:50 +01:00
<th scope="row">3</th>
2014-07-12 07:34:47 +02:00
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
2014-12-01 06:01:50 +01:00
<th scope="row">4</th>
2014-07-12 07:34:47 +02:00
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-info">
2014-12-01 06:01:50 +01:00
<th scope="row">5</th>
2014-07-12 07:34:47 +02:00
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
2014-12-01 06:01:50 +01:00
<th scope="row">6</th>
2014-07-12 07:34:47 +02:00
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-warning">
2014-12-01 06:01:50 +01:00
<th scope="row">7</th>
2014-07-12 07:34:47 +02:00
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
2014-12-01 06:01:50 +01:00
<th scope="row">8</th>
2014-07-12 07:34:47 +02:00
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-danger">
2014-12-01 06:01:50 +01:00
<th scope="row">9</th>
2014-07-12 07:34:47 +02:00
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>
</div>
{% highlight html %}
<!-- On rows -->
<tr class="table-active">...</tr>
<tr class="table-success">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-info">...</tr>
2014-07-12 07:34:47 +02:00
<!-- On cells (`td` or `th`) -->
<tr>
<td class="table-active">...</td>
<td class="table-success">...</td>
<td class="table-warning">...</td>
<td class="table-danger">...</td>
<td class="table-info">...</td>
2014-07-12 07:34:47 +02:00
</tr>
{% endhighlight %}
## Responsive tables
Create responsive tables by wrapping any `.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.
{% callout warning %}
#### Vertical clipping/truncation
Responsive tables make use of `overflow-y: hidden`, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.
{% endcallout %}
{% callout warning %}
#### Firefox and fieldsets
2015-10-19 18:37:19 +02:00
Firefox has some awkward fieldset styling involving `width` that interferes with the responsive table. This cannot be overridden without a Firefox-specific hack that we **don't** provide in Bootstrap:
Merge branch 'master' into v4 Conflicts: Gruntfile.js dist/css/bootstrap-theme.css dist/css/bootstrap-theme.css.map dist/css/bootstrap-theme.min.css dist/css/bootstrap.css dist/css/bootstrap.css.map dist/css/bootstrap.min.css dist/js/bootstrap.min.js docs/_data/glyphicons.yml docs/_includes/components/alerts.html docs/_includes/components/badges.html docs/_includes/components/breadcrumbs.html docs/_includes/components/button-dropdowns.html docs/_includes/components/button-groups.html docs/_includes/components/dropdowns.html docs/_includes/components/glyphicons.html docs/_includes/components/input-groups.html docs/_includes/components/jumbotron.html docs/_includes/components/labels.html docs/_includes/components/list-group.html docs/_includes/components/media.html docs/_includes/components/navbar.html docs/_includes/components/navs.html docs/_includes/components/page-header.html docs/_includes/components/pagination.html docs/_includes/components/panels.html docs/_includes/components/progress-bars.html docs/_includes/components/responsive-embed.html docs/_includes/components/thumbnails.html docs/_includes/components/wells.html docs/_includes/css/buttons.html docs/_includes/css/code.html docs/_includes/css/forms.html docs/_includes/css/grid.html docs/_includes/css/helpers.html docs/_includes/css/images.html docs/_includes/css/less.html docs/_includes/css/tables.html docs/_includes/css/type.html docs/_includes/customizer-variables.html docs/_includes/getting-started/accessibility.html docs/_includes/getting-started/disabling-responsiveness.html docs/_includes/getting-started/download.html docs/_includes/getting-started/whats-included.html docs/_includes/js/alerts.html docs/_includes/js/buttons.html docs/_includes/js/carousel.html docs/_includes/js/collapse.html docs/_includes/js/modal.html docs/_includes/js/overview.html docs/_includes/js/popovers.html docs/_includes/js/tabs.html docs/_includes/js/tooltips.html docs/_includes/nav/components.html docs/_includes/nav/javascript.html docs/_jade/customizer-variables.jade docs/_layouts/default.html docs/about.html docs/assets/css/docs.min.css docs/assets/css/src/docs.css docs/assets/js/customize.min.js docs/assets/js/raw-files.min.js docs/assets/js/src/customizer.js docs/customize.html docs/dist/css/bootstrap-theme.css.map docs/dist/css/bootstrap.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css less/glyphicons.less less/mixins/vendor-prefixes.less less/navbar.less less/popovers.less less/tables.less less/theme.less less/tooltip.less less/variables.less package.json scss/_carousel.scss scss/_close.scss scss/_forms.scss test-infra/npm-shrinkwrap.json
2015-01-04 05:08:58 +01:00
2014-07-12 07:34:47 +02:00
{% highlight css %}
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
{% endhighlight %}
2015-06-19 08:56:43 +02:00
For more information, read [this Stack Overflow answer](https://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685).
{% endcallout %}
2014-07-12 07:34:47 +02:00
<div class="bd-example">
2014-07-12 07:34:47 +02:00
<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>
2014-12-01 06:01:50 +01:00
<th scope="row">1</th>
2014-07-12 07:34:47 +02:00
<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>
2014-12-01 06:01:50 +01:00
<th scope="row">2</th>
2014-07-12 07:34:47 +02:00
<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>
2014-12-01 06:01:50 +01:00
<th scope="row">3</th>
2014-07-12 07:34:47 +02:00
<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>
<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>
2014-12-01 06:01:50 +01:00
<th scope="row">1</th>
2014-07-12 07:34:47 +02:00
<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>
2014-12-01 06:01:50 +01:00
<th scope="row">2</th>
2014-07-12 07:34:47 +02:00
<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>
2014-12-01 06:01:50 +01:00
<th scope="row">3</th>
2014-07-12 07:34:47 +02:00
<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>
</div>
{% highlight html %}
<div class="table-responsive">
<table class="table">
...
</table>
</div>
{% endhighlight %}
### Reflow
{% example html %}
<table class="table table-reflow">
<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>
2014-12-01 06:01:50 +01:00
<th scope="row">1</th>
<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>
2014-12-01 06:01:50 +01:00
<th scope="row">2</th>
<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>
2014-12-01 06:01:50 +01:00
<th scope="row">3</th>
<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>
{% endexample %}