mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-18 22:08:05 +01:00
overhaul tables docs for more streamlined content
This commit is contained in:
Mark Otto
parent
aff3694f28
commit
ca63ea2f26
@ -435,10 +435,182 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
<h1>Tables <small>For, you guessed it, tabular data</small></h1>
|
||||
</div>
|
||||
|
||||
<h2>Default styles</h2>
|
||||
<p>For basic styling—light padding and only horizontal dividers—add the base class <code>.table</code> to any <code><table></code>.</p>
|
||||
<div class="bs-docs-example">
|
||||
<table class="table">
|
||||
<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>
|
||||
<pre class="prettyprint linenums">
|
||||
<table class="table">
|
||||
…
|
||||
</table>
|
||||
</pre>
|
||||
|
||||
|
||||
<h2>Table markup</h2>
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h2>Optional classes</h2>
|
||||
<p>Add any of the follow classes to the <code>.table</code> base class.</p>
|
||||
|
||||
<h3><code>.table-striped</code></h3>
|
||||
<p>Adds zebra-striping to any table row within the <code><tbody></code> via the <code>:nth-child</code> CSS selector (not available in IE7-IE8).</p>
|
||||
<div class="bs-docs-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>
|
||||
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
|
||||
<table class="table table-striped">
|
||||
…
|
||||
</table>
|
||||
</pre>
|
||||
|
||||
<h3><code>.table-bordered</code></h3>
|
||||
<p>Add borders and rounded corners to the table.</p>
|
||||
<div class="bs-docs-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>
|
||||
<pre class="prettyprint linenums">
|
||||
<table class="table table-bordered">
|
||||
…
|
||||
</table>
|
||||
</pre>
|
||||
|
||||
<h3><code>.table-condensed</code></h3>
|
||||
<p>Makes tables more compact by cutting cell padding in half.</p>
|
||||
<div class="bs-docs-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>
|
||||
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
|
||||
<table class="table table-condensed">
|
||||
…
|
||||
</table>
|
||||
</pre>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h2>Supported table markup</h2>
|
||||
<p>List of supported table HTML elements and how they should be used.</p>
|
||||
<table class="table table-bordered table-striped">
|
||||
<colgroup>
|
||||
<col class="span1">
|
||||
@ -527,267 +699,6 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
</table>
|
||||
</pre>
|
||||
|
||||
|
||||
<h2>Table options</h2>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Class</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Default</td>
|
||||
<td class="muted">None</td>
|
||||
<td>No styles, just columns and rows</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Basic</td>
|
||||
<td>
|
||||
<code>.table</code>
|
||||
</td>
|
||||
<td>Only horizontal lines between rows</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bordered</td>
|
||||
<td>
|
||||
<code>.table-bordered</code>
|
||||
</td>
|
||||
<td>Rounds corners and adds outer border</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zebra-stripe</td>
|
||||
<td>
|
||||
<code>.table-striped</code>
|
||||
</td>
|
||||
<td>Adds light gray background color to odd rows (1, 3, 5, etc)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Condensed</td>
|
||||
<td>
|
||||
<code>.table-condensed</code>
|
||||
</td>
|
||||
<td>Cuts vertical padding in half, from 8px to 4px, within all <code>td</code> and <code>th</code> elements</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
<h2>Example tables</h2>
|
||||
|
||||
<h3>1. Default table styles</h3>
|
||||
<p>Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the <code>.table</code> class is required.</p>
|
||||
<div class="bs-docs-example">
|
||||
<table class="table">
|
||||
<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>
|
||||
<pre class="prettyprint linenums">
|
||||
<table class="table">
|
||||
…
|
||||
</table>
|
||||
</pre>
|
||||
|
||||
<h3>2. Striped table</h3>
|
||||
<p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.table-striped</code> class.</p>
|
||||
<p class="muted"><strong>Note:</strong> Striped tables use the <code>:nth-child</code> CSS selector and is not available in IE7-IE8.</p>
|
||||
<div class="bs-docs-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>
|
||||
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
|
||||
<table class="table table-striped">
|
||||
…
|
||||
</table>
|
||||
</pre>
|
||||
|
||||
|
||||
<h3>3. Bordered table</h3>
|
||||
<p>Add borders around the entire table and rounded corners for aesthetic purposes.</p>
|
||||
<div class="bs-docs-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>
|
||||
<pre class="prettyprint linenums">
|
||||
<table class="table table-bordered">
|
||||
…
|
||||
</table>
|
||||
</pre>
|
||||
|
||||
<h3>4. Condensed table</h3>
|
||||
<p>Make your tables more compact by adding the <code>.table-condensed</code> class to cut table cell padding in half (from 8px to 4px).</p>
|
||||
<div class="bs-docs-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>
|
||||
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
|
||||
<table class="table table-condensed">
|
||||
…
|
||||
</table>
|
||||
</pre>
|
||||
|
||||
|
||||
<h3>5. Combine them all!</h3>
|
||||
<p>Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.</p>
|
||||
<div class="bs-docs-example">
|
||||
<table class="table table-striped table-bordered table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th colspan="2">Full name</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<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>
|
||||
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
|
||||
<table class="table table-striped table-bordered table-condensed">
|
||||
...
|
||||
</table>
|
||||
</pre>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
435
docs/templates/pages/base-css.mustache
vendored
435
docs/templates/pages/base-css.mustache
vendored
@ -366,10 +366,182 @@
|
||||
<h1>{{_i}}Tables <small>For, you guessed it, tabular data</small>{{/i}}</h1>
|
||||
</div>
|
||||
|
||||
<h2>{{_i}}Default styles{{/i}}</h2>
|
||||
<p>{{_i}}For basic styling—light padding and only horizontal dividers—add the base class <code>.table</code> to any <code><table></code>.{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>{{_i}}First Name{{/i}}</th>
|
||||
<th>{{_i}}Last Name{{/i}}</th>
|
||||
<th>{{_i}}Username{{/i}}</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 }}
|
||||
<pre class="prettyprint linenums">
|
||||
<table class="table">
|
||||
…
|
||||
</table>
|
||||
</pre>
|
||||
|
||||
|
||||
<h2>{{_i}}Table markup{{/i}}</h2>
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h2>{{_i}}Optional classes{{/i}}</h2>
|
||||
<p>{{_i}}Add any of the follow classes to the <code>.table</code> base class.{{/i}}</p>
|
||||
|
||||
<h3><code>{{_i}}.table-striped{{/i}}</code></h3>
|
||||
<p>{{_i}}Adds zebra-striping to any table row within the <code><tbody></code> via the <code>:nth-child</code> CSS selector (not available in IE7-IE8).{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>{{_i}}First Name{{/i}}</th>
|
||||
<th>{{_i}}Last Name{{/i}}</th>
|
||||
<th>{{_i}}Username{{/i}}</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 }}
|
||||
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
|
||||
<table class="table table-striped">
|
||||
…
|
||||
</table>
|
||||
</pre>
|
||||
|
||||
<h3><code>{{_i}}.table-bordered{{/i}}</code></h3>
|
||||
<p>{{_i}}Add borders and rounded corners to the table.{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>{{_i}}First Name{{/i}}</th>
|
||||
<th>{{_i}}Last Name{{/i}}</th>
|
||||
<th>{{_i}}Username{{/i}}</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 }}
|
||||
<pre class="prettyprint linenums">
|
||||
<table class="table table-bordered">
|
||||
…
|
||||
</table>
|
||||
</pre>
|
||||
|
||||
<h3><code>{{_i}}.table-condensed{{/i}}</code></h3>
|
||||
<p>{{_i}}Makes tables more compact by cutting cell padding in half.{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<table class="table table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>{{_i}}First Name{{/i}}</th>
|
||||
<th>{{_i}}Last Name{{/i}}</th>
|
||||
<th>{{_i}}Username{{/i}}</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 }}
|
||||
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
|
||||
<table class="table table-condensed">
|
||||
…
|
||||
</table>
|
||||
</pre>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h2>{{_i}}Supported table markup{{/i}}</h2>
|
||||
<p>{{_i}}List of supported table HTML elements and how they should be used.{{/i}}</p>
|
||||
<table class="table table-bordered table-striped">
|
||||
<colgroup>
|
||||
<col class="span1">
|
||||
@ -458,267 +630,6 @@
|
||||
</table>
|
||||
</pre>
|
||||
|
||||
|
||||
<h2>{{_i}}Table options{{/i}}</h2>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{_i}}Name{{/i}}</th>
|
||||
<th>{{_i}}Class{{/i}}</th>
|
||||
<th>{{_i}}Description{{/i}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{{_i}}Default{{/i}}</td>
|
||||
<td class="muted">{{_i}}None{{/i}}</td>
|
||||
<td>{{_i}}No styles, just columns and rows{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{_i}}Basic{{/i}}</td>
|
||||
<td>
|
||||
<code>.table</code>
|
||||
</td>
|
||||
<td>{{_i}}Only horizontal lines between rows{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{_i}}Bordered{{/i}}</td>
|
||||
<td>
|
||||
<code>.table-bordered</code>
|
||||
</td>
|
||||
<td>{{_i}}Rounds corners and adds outer border{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{_i}}Zebra-stripe{{/i}}</td>
|
||||
<td>
|
||||
<code>.table-striped</code>
|
||||
</td>
|
||||
<td>{{_i}}Adds light gray background color to odd rows (1, 3, 5, etc){{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{_i}}Condensed{{/i}}</td>
|
||||
<td>
|
||||
<code>.table-condensed</code>
|
||||
</td>
|
||||
<td>{{_i}}Cuts vertical padding in half, from 8px to 4px, within all <code>td</code> and <code>th</code> elements{{/i}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
<h2>{{_i}}Example tables{{/i}}</h2>
|
||||
|
||||
<h3>1. {{_i}}Default table styles{{/i}}</h3>
|
||||
<p>{{_i}}Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the <code>.table</code> class is required.{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>{{_i}}First Name{{/i}}</th>
|
||||
<th>{{_i}}Last Name{{/i}}</th>
|
||||
<th>{{_i}}Username{{/i}}</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 }}
|
||||
<pre class="prettyprint linenums">
|
||||
<table class="table">
|
||||
…
|
||||
</table>
|
||||
</pre>
|
||||
|
||||
<h3>2. {{_i}}Striped table{{/i}}</h3>
|
||||
<p>{{_i}}Get a little fancy with your tables by adding zebra-striping—just add the <code>.table-striped</code> class.{{/i}}</p>
|
||||
<p class="muted">{{_i}}<strong>Note:</strong> Striped tables use the <code>:nth-child</code> CSS selector and is not available in IE7-IE8.{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>{{_i}}First Name{{/i}}</th>
|
||||
<th>{{_i}}Last Name{{/i}}</th>
|
||||
<th>{{_i}}Username{{/i}}</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 }}
|
||||
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
|
||||
<table class="table table-striped">
|
||||
…
|
||||
</table>
|
||||
</pre>
|
||||
|
||||
|
||||
<h3>3. {{_i}}Bordered table{{/i}}</h3>
|
||||
<p>{{_i}}Add borders around the entire table and rounded corners for aesthetic purposes.{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>{{_i}}First Name{{/i}}</th>
|
||||
<th>{{_i}}Last Name{{/i}}</th>
|
||||
<th>{{_i}}Username{{/i}}</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 }}
|
||||
<pre class="prettyprint linenums">
|
||||
<table class="table table-bordered">
|
||||
…
|
||||
</table>
|
||||
</pre>
|
||||
|
||||
<h3>4. {{_i}}Condensed table{{/i}}</h3>
|
||||
<p>{{_i}}Make your tables more compact by adding the <code>.table-condensed</code> class to cut table cell padding in half (from 8px to 4px).{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<table class="table table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>{{_i}}First Name{{/i}}</th>
|
||||
<th>{{_i}}Last Name{{/i}}</th>
|
||||
<th>{{_i}}Username{{/i}}</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 }}
|
||||
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
|
||||
<table class="table table-condensed">
|
||||
…
|
||||
</table>
|
||||
</pre>
|
||||
|
||||
|
||||
<h3>5. {{_i}}Combine them all!{{/i}}</h3>
|
||||
<p>{{_i}}Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<table class="table table-striped table-bordered table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th colspan="2">{{_i}}Full name{{/i}}</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>{{_i}}First Name{{/i}}</th>
|
||||
<th>{{_i}}Last Name{{/i}}</th>
|
||||
<th>{{_i}}Username{{/i}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<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 }}
|
||||
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
|
||||
<table class="table table-striped table-bordered table-condensed">
|
||||
...
|
||||
</table>
|
||||
</pre>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user