aboutsummaryrefslogtreecommitdiff
path: root/docs/components/tables.md
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2015-08-09 23:38:16 -0700
committerMark Otto <[email protected]>2015-08-09 23:38:16 -0700
commiteaeee93fa34092ee7c107d75edffd6c8274c15fb (patch)
treedd3c7e7a09c4879ebf26a1621e1351414d3de6c9 /docs/components/tables.md
parent317c667d1c0d1d0984d863d9d4baad9e1a25b1c6 (diff)
downloadbootstrap-eaeee93fa34092ee7c107d75edffd6c8274c15fb.tar.xz
bootstrap-eaeee93fa34092ee7c107d75edffd6c8274c15fb.zip
docs rearrange
Diffstat (limited to 'docs/components/tables.md')
-rw-r--r--docs/components/tables.md611
1 files changed, 0 insertions, 611 deletions
diff --git a/docs/components/tables.md b/docs/components/tables.md
deleted file mode 100644
index c99187d8c..000000000
--- a/docs/components/tables.md
+++ /dev/null
@@ -1,611 +0,0 @@
----
-layout: page
-title: Tables
-group: components
----
-
-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>`.
-
-## Contents
-
-* Will be replaced with the ToC, excluding the "Contents" header
-{:toc}
-
-## 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>
- <th scope="row">1</th>
- <td>Mark</td>
- <td>Otto</td>
- <td>@mdo</td>
- </tr>
- <tr>
- <th scope="row">2</th>
- <td>Jacob</td>
- <td>Thornton</td>
- <td>@fat</td>
- </tr>
- <tr>
- <th scope="row">3</th>
- <td>Larry</td>
- <td>the Bird</td>
- <td>@twitter</td>
- </tr>
- </tbody>
-</table>
-{% endexample %}
-
-## 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>
- <th scope="row">1</th>
- <td>Mark</td>
- <td>Otto</td>
- <td>@mdo</td>
- </tr>
- <tr>
- <th scope="row">2</th>
- <td>Jacob</td>
- <td>Thornton</td>
- <td>@fat</td>
- </tr>
- <tr>
- <th scope="row">3</th>
- <td>Larry</td>
- <td>the Bird</td>
- <td>@twitter</td>
- </tr>
- </tbody>
-</table>
-{% endexample %}
-
-## 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>
- <th scope="row">1</th>
- <td>Mark</td>
- <td>Otto</td>
- <td>@mdo</td>
- </tr>
- <tr>
- <th scope="row">2</th>
- <td>Jacob</td>
- <td>Thornton</td>
- <td>@fat</td>
- </tr>
- <tr>
- <th scope="row">3</th>
- <td>Larry</td>
- <td>the Bird</td>
- <td>@twitter</td>
- </tr>
- </tbody>
-</table>
-
-<table class="table">
- <thead class="thead-default">
- <tr>
- <th>#</th>
- <th>First Name</th>
- <th>Last Name</th>
- <th>Username</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <th scope="row">1</th>
- <td>Mark</td>
- <td>Otto</td>
- <td>@mdo</td>
- </tr>
- <tr>
- <th scope="row">2</th>
- <td>Jacob</td>
- <td>Thornton</td>
- <td>@fat</td>
- </tr>
- <tr>
- <th scope="row">3</th>
- <td>Larry</td>
- <td>the Bird</td>
- <td>@twitter</td>
- </tr>
- </tbody>
-</table>
-{% endexample %}
-
-## 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>
- <th scope="row">1</th>
- <td>Mark</td>
- <td>Otto</td>
- <td>@mdo</td>
- </tr>
- <tr>
- <th scope="row">2</th>
- <td>Jacob</td>
- <td>Thornton</td>
- <td>@fat</td>
- </tr>
- <tr>
- <th scope="row">3</th>
- <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>
- <td>Mark</td>
- <td>Otto</td>
- <td>@mdo</td>
- </tr>
- <tr>
- <th scope="row">2</th>
- <td>Mark</td>
- <td>Otto</td>
- <td>@TwBootstrap</td>
- </tr>
- <tr>
- <th scope="row">3</th>
- <td>Jacob</td>
- <td>Thornton</td>
- <td>@fat</td>
- </tr>
- <tr>
- <th scope="row">4</th>
- <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>
- <th scope="row">1</th>
- <td>Mark</td>
- <td>Otto</td>
- <td>@mdo</td>
- </tr>
- <tr>
- <th scope="row">2</th>
- <td>Jacob</td>
- <td>Thornton</td>
- <td>@fat</td>
- </tr>
- <tr>
- <th scope="row">3</th>
- <td colspan="2">Larry the Bird</td>
- <td>@twitter</td>
- </tr>
- </tbody>
-</table>
-{% endexample %}
-
-## Small table
-
-Add `.table-sm` to make tables more compact by cutting cell padding in half.
-
-{% example html %}
-<table class="table table-sm">
- <thead>
- <tr>
- <th>#</th>
- <th>First Name</th>
- <th>Last Name</th>
- <th>Username</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <th scope="row">1</th>
- <td>Mark</td>
- <td>Otto</td>
- <td>@mdo</td>
- </tr>
- <tr>
- <th scope="row">2</th>
- <td>Jacob</td>
- <td>Thornton</td>
- <td>@fat</td>
- </tr>
- <tr>
- <th scope="row">3</th>
- <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>
- <th scope="row">
- <code>.table-active</code>
- </th>
- <td>Applies the hover color to a particular row or cell</td>
- </tr>
- <tr>
- <th scope="row">
- <code>.table-success</code>
- </th>
- <td>Indicates a successful or positive action</td>
- </tr>
- <tr>
- <th scope="row">
- <code>.table-info</code>
- </th>
- <td>Indicates a neutral informative change or action</td>
- </tr>
- <tr>
- <th scope="row">
- <code>.table-warning</code>
- </th>
- <td>Indicates a warning that might need attention</td>
- </tr>
- <tr>
- <th scope="row">
- <code>.table-danger</code>
- </th>
- <td>Indicates a dangerous or potentially negative action</td>
- </tr>
- </tbody>
- </table>
-</div>
-
-<div class="bd-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="table-active">
- <th scope="row">1</th>
- <td>Column content</td>
- <td>Column content</td>
- <td>Column content</td>
- </tr>
- <tr>
- <th scope="row">2</th>
- <td>Column content</td>
- <td>Column content</td>
- <td>Column content</td>
- </tr>
- <tr class="table-success">
- <th scope="row">3</th>
- <td>Column content</td>
- <td>Column content</td>
- <td>Column content</td>
- </tr>
- <tr>
- <th scope="row">4</th>
- <td>Column content</td>
- <td>Column content</td>
- <td>Column content</td>
- </tr>
- <tr class="table-info">
- <th scope="row">5</th>
- <td>Column content</td>
- <td>Column content</td>
- <td>Column content</td>
- </tr>
- <tr>
- <th scope="row">6</th>
- <td>Column content</td>
- <td>Column content</td>
- <td>Column content</td>
- </tr>
- <tr class="table-warning">
- <th scope="row">7</th>
- <td>Column content</td>
- <td>Column content</td>
- <td>Column content</td>
- </tr>
- <tr>
- <th scope="row">8</th>
- <td>Column content</td>
- <td>Column content</td>
- <td>Column content</td>
- </tr>
- <tr class="table-danger">
- <th scope="row">9</th>
- <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>
-
-<!-- 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>
-</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
-
-Firefox has some awkward fieldset styling involving `width` that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we **don't** provide in Bootstrap:
-
-{% highlight css %}
-@-moz-document url-prefix() {
- fieldset { display: table-cell; }
-}
-{% endhighlight %}
-
-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 %}
-
-<div class="bd-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>
- <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>
- <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>
- <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>
- </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>
- <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>
- <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>
- <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>
- </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>
- <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>
- <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>
- <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 %}