kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

update table section to single column

Browse source
This commit is contained in:
Mark Otto 2012-06-04 21:13:35 -07:00
parent 094e12f68d
commit 060100cf3a
2 changed files with 478 additions and 544 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

511
docs/base-css.html
View file

@ -431,81 +431,78 @@ For example, <code>section</code> should be wrapped as inline.
</div> </div>
<h2>Table markup</h2> <h2>Table markup</h2>
<div class="row">
<div class="span8"> <table class="table table-bordered table-striped">
<table class="table table-bordered table-striped"> <colgroup>
<colgroup> <col class="span1">
<col class="span1"> <col class="span7">
<col class="span7"> </colgroup>
</colgroup> <thead>
<thead> <tr>
<tr> <th>Tag</th>
<th>Tag</th> <th>Description</th>
<th>Description</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <td>
<td> <code>&lt;table&gt;</code>
<code>&lt;table&gt;</code> </td>
</td> <td>
<td> Wrapping element for displaying data in a tabular format
Wrapping element for displaying data in a tabular format </td>
</td> </tr>
</tr> <tr>
<tr> <td>
<td> <code>&lt;thead&gt;</code>
<code>&lt;thead&gt;</code> </td>
</td> <td>
<td> Container element for table header rows (<code>&lt;tr&gt;</code>) to label table columns
Container element for table header rows (<code>&lt;tr&gt;</code>) to label table columns </td>
</td> </tr>
</tr> <tr>
<tr> <td>
<td> <code>&lt;tbody&gt;</code>
<code>&lt;tbody&gt;</code> </td>
</td> <td>
<td> Container element for table rows (<code>&lt;tr&gt;</code>) in the body of the table
Container element for table rows (<code>&lt;tr&gt;</code>) in the body of the table </td>
</td> </tr>
</tr> <tr>
<tr> <td>
<td> <code>&lt;tr&gt;</code>
<code>&lt;tr&gt;</code> </td>
</td> <td>
<td> Container element for a set of table cells (<code>&lt;td&gt;</code> or <code>&lt;th&gt;</code>) that appears on a single row
Container element for a set of table cells (<code>&lt;td&gt;</code> or <code>&lt;th&gt;</code>) that appears on a single row </td>
</td> </tr>
</tr> <tr>
<tr> <td>
<td> <code>&lt;td&gt;</code>
<code>&lt;td&gt;</code> </td>
</td> <td>
<td> Default table cell
Default table cell </td>
</td> </tr>
</tr> <tr>
<tr> <td>
<td> <code>&lt;th&gt;</code>
<code>&lt;th&gt;</code> </td>
</td> <td>
<td> Special table cell for column (or row, depending on scope and placement) labels<br>
Special table cell for column (or row, depending on scope and placement) labels<br> Must be used within a <code>&lt;thead&gt;</code>
Must be used within a <code>&lt;thead&gt;</code> </td>
</td> </tr>
</tr> <tr>
<tr> <td>
<td> <code>&lt;caption&gt;</code>
<code>&lt;caption&gt;</code> </td>
</td> <td>
<td> Description or summary of what the table holds, especially useful for screen readers
Description or summary of what the table holds, especially useful for screen readers </td>
</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
</div>
<div class="span4">
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;table&gt; &lt;table&gt;
&lt;thead&gt; &lt;thead&gt;
@ -522,8 +519,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
&lt;/tbody&gt; &lt;/tbody&gt;
&lt;/table&gt; &lt;/table&gt;
</pre> </pre>
</div>
</div>
<h2>Table options</h2> <h2>Table options</h2>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
@ -575,233 +571,204 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<h2>Example tables</h2> <h2>Example tables</h2>
<h3>1. Default table styles</h3> <h3>1. Default table styles</h3>
<div class="row"> <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="span4">
<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>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;table class="table"&gt; &lt;table class="table"&gt;
… …
&lt;/table&gt;</pre> &lt;/table&gt;</pre>
</div>
<div class="span8"> <table class="table">
<table class="table"> <thead>
<thead> <tr>
<tr> <th>#</th>
<th>#</th> <th>First Name</th>
<th>First Name</th> <th>Last Name</th>
<th>Last Name</th> <th>Username</th>
<th>Username</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <td>1</td>
<td>1</td> <td>Mark</td>
<td>Mark</td> <td>Otto</td>
<td>Otto</td> <td>@mdo</td>
<td>@mdo</td> </tr>
</tr> <tr>
<tr> <td>2</td>
<td>2</td> <td>Jacob</td>
<td>Jacob</td> <td>Thornton</td>
<td>Thornton</td> <td>@fat</td>
<td>@fat</td> </tr>
</tr> <tr>
<tr> <td>3</td>
<td>3</td> <td>Larry</td>
<td>Larry</td> <td>the Bird</td>
<td>the Bird</td> <td>@twitter</td>
<td>@twitter</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
</div>
</div>
<h3>2. Striped table</h3> <h3>2. Striped table</h3>
<div class="row"> <p>Get a little fancy with your tables by adding zebra-striping&mdash;just add the <code>.table-striped</code> class.</p>
<div class="span4"> <p class="muted"><strong>Note:</strong> Striped tables use the <code>:nth-child</code> CSS selector and is not available in IE7-IE8.</p>
<p>Get a little fancy with your tables by adding zebra-striping&mdash;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>
<pre class="prettyprint linenums" style="margin-bottom: 18px;"> <pre class="prettyprint linenums" style="margin-bottom: 18px;">
&lt;table class="table table-striped"&gt; &lt;table class="table table-striped"&gt;
… …
&lt;/table&gt;</pre> &lt;/table&gt;</pre>
</div>
<div class="span8"> <table class="table table-striped">
<table class="table table-striped"> <thead>
<thead> <tr>
<tr> <th>#</th>
<th>#</th> <th>First Name</th>
<th>First Name</th> <th>Last Name</th>
<th>Last Name</th> <th>Username</th>
<th>Username</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <td>1</td>
<td>1</td> <td>Mark</td>
<td>Mark</td> <td>Otto</td>
<td>Otto</td> <td>@mdo</td>
<td>@mdo</td> </tr>
</tr> <tr>
<tr> <td>2</td>
<td>2</td> <td>Jacob</td>
<td>Jacob</td> <td>Thornton</td>
<td>Thornton</td> <td>@fat</td>
<td>@fat</td> </tr>
</tr> <tr>
<tr> <td>3</td>
<td>3</td> <td>Larry</td>
<td>Larry</td> <td>the Bird</td>
<td>the Bird</td> <td>@twitter</td>
<td>@twitter</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
</div>
</div>
<h3>3. Bordered table</h3> <h3>3. Bordered table</h3>
<div class="row"> <p>Add borders around the entire table and rounded corners for aesthetic purposes.</p>
<div class="span4">
<p>Add borders around the entire table and rounded corners for aesthetic purposes.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;table class="table table-bordered"&gt; &lt;table class="table table-bordered"&gt;
… …
&lt;/table&gt;</pre> &lt;/table&gt;</pre>
</div>
<div class="span8">
<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>
</div>
<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>
<h3>4. Condensed table</h3> <h3>4. Condensed table</h3>
<div class="row"> <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="span4">
<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>
<pre class="prettyprint linenums" style="margin-bottom: 18px;"> <pre class="prettyprint linenums" style="margin-bottom: 18px;">
&lt;table class="table table-condensed"&gt; &lt;table class="table table-condensed"&gt;
… …
&lt;/table&gt;</pre> &lt;/table&gt;</pre>
</div> <table class="table table-condensed">
<div class="span8"> <thead>
<table class="table table-condensed"> <tr>
<thead> <th>#</th>
<tr> <th>First Name</th>
<th>#</th> <th>Last Name</th>
<th>First Name</th> <th>Username</th>
<th>Last Name</th> </tr>
<th>Username</th> </thead>
</tr> <tbody>
</thead> <tr>
<tbody> <td>1</td>
<tr> <td>Mark</td>
<td>1</td> <td>Otto</td>
<td>Mark</td> <td>@mdo</td>
<td>Otto</td> </tr>
<td>@mdo</td> <tr>
</tr> <td>2</td>
<tr> <td>Jacob</td>
<td>2</td> <td>Thornton</td>
<td>Jacob</td> <td>@fat</td>
<td>Thornton</td> </tr>
<td>@fat</td> <tr>
</tr> <td>3</td>
<tr> <td colspan="2">Larry the Bird</td>
<td>3</td> <td>@twitter</td>
<td colspan="2">Larry the Bird</td> </tr>
<td>@twitter</td> </tbody>
</tr> </table>
</tbody>
</table>
</div>
</div>
<h3>5. Combine them all!</h3> <h3>5. Combine them all!</h3>
<div class="row"> <p>Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.</p>
<div class="span4">
<p>Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.</p>
<pre class="prettyprint linenums" style="margin-bottom: 18px;"> <pre class="prettyprint linenums" style="margin-bottom: 18px;">
&lt;table class="table table-striped table-bordered table-condensed"&gt; &lt;table class="table table-striped table-bordered table-condensed"&gt;
... ...
&lt;/table&gt;</pre> &lt;/table&gt;</pre>
</div> <table class="table table-striped table-bordered table-condensed">
<div class="span8"> <thead>
<table class="table table-striped table-bordered table-condensed"> <tr>
<thead> <th></th>
<tr> <th colspan="2">Full name</th>
<th></th> <th></th>
<th colspan="2">Full name</th> </tr>
<th></th> <tr>
</tr> <th>#</th>
<tr> <th>First Name</th>
<th>#</th> <th>Last Name</th>
<th>First Name</th> <th>Username</th>
<th>Last Name</th> </tr>
<th>Username</th> </thead>
</tr> <tbody>
</thead> <tr>
<tbody> <tr>
<tr> <td>1</td>
<tr> <td>Mark</td>
<td>1</td> <td>Otto</td>
<td>Mark</td> <td>@mdo</td>
<td>Otto</td> </tr>
<td>@mdo</td> <tr>
</tr> <td>2</td>
<tr> <td>Jacob</td>
<td>2</td> <td>Thornton</td>
<td>Jacob</td> <td>@fat</td>
<td>Thornton</td> </tr>
<td>@fat</td> <tr>
</tr> <td>3</td>
<tr> <td colspan="2">Larry the Bird</td>
<td>3</td> <td>@twitter</td>
<td colspan="2">Larry the Bird</td> </tr>
<td>@twitter</td> </tbody>
</tr> </table>
</tbody>
</table>
</div>
</div>
</section> </section>

511
docs/templates/pages/base-css.mustache vendored
View file

@ -362,81 +362,78 @@
</div> </div>
<h2>{{_i}}Table markup{{/i}}</h2> <h2>{{_i}}Table markup{{/i}}</h2>
<div class="row">
<div class="span8"> <table class="table table-bordered table-striped">
<table class="table table-bordered table-striped"> <colgroup>
<colgroup> <col class="span1">
<col class="span1"> <col class="span7">
<col class="span7"> </colgroup>
</colgroup> <thead>
<thead> <tr>
<tr> <th>{{_i}}Tag{{/i}}</th>
<th>{{_i}}Tag{{/i}}</th> <th>{{_i}}Description{{/i}}</th>
<th>{{_i}}Description{{/i}}</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <td>
<td> <code>&lt;table&gt;</code>
<code>&lt;table&gt;</code> </td>
</td> <td>
<td> {{_i}}Wrapping element for displaying data in a tabular format{{/i}}
{{_i}}Wrapping element for displaying data in a tabular format{{/i}} </td>
</td> </tr>
</tr> <tr>
<tr> <td>
<td> <code>&lt;thead&gt;</code>
<code>&lt;thead&gt;</code> </td>
</td> <td>
<td> {{_i}}Container element for table header rows (<code>&lt;tr&gt;</code>) to label table columns{{/i}}
{{_i}}Container element for table header rows (<code>&lt;tr&gt;</code>) to label table columns{{/i}} </td>
</td> </tr>
</tr> <tr>
<tr> <td>
<td> <code>&lt;tbody&gt;</code>
<code>&lt;tbody&gt;</code> </td>
</td> <td>
<td> {{_i}}Container element for table rows (<code>&lt;tr&gt;</code>) in the body of the table{{/i}}
{{_i}}Container element for table rows (<code>&lt;tr&gt;</code>) in the body of the table{{/i}} </td>
</td> </tr>
</tr> <tr>
<tr> <td>
<td> <code>&lt;tr&gt;</code>
<code>&lt;tr&gt;</code> </td>
</td> <td>
<td> {{_i}}Container element for a set of table cells (<code>&lt;td&gt;</code> or <code>&lt;th&gt;</code>) that appears on a single row{{/i}}
{{_i}}Container element for a set of table cells (<code>&lt;td&gt;</code> or <code>&lt;th&gt;</code>) that appears on a single row{{/i}} </td>
</td> </tr>
</tr> <tr>
<tr> <td>
<td> <code>&lt;td&gt;</code>
<code>&lt;td&gt;</code> </td>
</td> <td>
<td> {{_i}}Default table cell{{/i}}
{{_i}}Default table cell{{/i}} </td>
</td> </tr>
</tr> <tr>
<tr> <td>
<td> <code>&lt;th&gt;</code>
<code>&lt;th&gt;</code> </td>
</td> <td>
<td> {{_i}}Special table cell for column (or row, depending on scope and placement) labels{{/i}}<br>
{{_i}}Special table cell for column (or row, depending on scope and placement) labels{{/i}}<br> {{_i}}Must be used within a <code>&lt;thead&gt;</code>{{/i}}
{{_i}}Must be used within a <code>&lt;thead&gt;</code>{{/i}} </td>
</td> </tr>
</tr> <tr>
<tr> <td>
<td> <code>&lt;caption&gt;</code>
<code>&lt;caption&gt;</code> </td>
</td> <td>
<td> {{_i}}Description or summary of what the table holds, especially useful for screen readers{{/i}}
{{_i}}Description or summary of what the table holds, especially useful for screen readers{{/i}} </td>
</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
</div>
<div class="span4">
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;table&gt; &lt;table&gt;
&lt;thead&gt; &lt;thead&gt;
@ -453,8 +450,7 @@
&lt;/tbody&gt; &lt;/tbody&gt;
&lt;/table&gt; &lt;/table&gt;
</pre> </pre>
</div>
</div>
<h2>{{_i}}Table options{{/i}}</h2> <h2>{{_i}}Table options{{/i}}</h2>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
@ -506,233 +502,204 @@
<h2>{{_i}}Example tables{{/i}}</h2> <h2>{{_i}}Example tables{{/i}}</h2>
<h3>1. {{_i}}Default table styles{{/i}}</h3> <h3>1. {{_i}}Default table styles{{/i}}</h3>
<div class="row"> <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="span4">
<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>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;table class="table"&gt; &lt;table class="table"&gt;
… …
&lt;/table&gt;</pre> &lt;/table&gt;</pre>
</div>
<div class="span8"> <table class="table">
<table class="table"> <thead>
<thead> <tr>
<tr> <th>#</th>
<th>#</th> <th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}First Name{{/i}}</th> <th>{{_i}}Last Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th> <th>{{_i}}Username{{/i}}</th>
<th>{{_i}}Username{{/i}}</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <td>1</td>
<td>1</td> <td>Mark</td>
<td>Mark</td> <td>Otto</td>
<td>Otto</td> <td>@mdo</td>
<td>@mdo</td> </tr>
</tr> <tr>
<tr> <td>2</td>
<td>2</td> <td>Jacob</td>
<td>Jacob</td> <td>Thornton</td>
<td>Thornton</td> <td>@fat</td>
<td>@fat</td> </tr>
</tr> <tr>
<tr> <td>3</td>
<td>3</td> <td>Larry</td>
<td>Larry</td> <td>the Bird</td>
<td>the Bird</td> <td>@twitter</td>
<td>@twitter</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
</div>
</div>
<h3>2. {{_i}}Striped table{{/i}}</h3> <h3>2. {{_i}}Striped table{{/i}}</h3>
<div class="row"> <p>{{_i}}Get a little fancy with your tables by adding zebra-striping&mdash;just add the <code>.table-striped</code> class.{{/i}}</p>
<div class="span4"> <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>
<p>{{_i}}Get a little fancy with your tables by adding zebra-striping&mdash;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>
<pre class="prettyprint linenums" style="margin-bottom: 18px;"> <pre class="prettyprint linenums" style="margin-bottom: 18px;">
&lt;table class="table table-striped"&gt; &lt;table class="table table-striped"&gt;
… …
&lt;/table&gt;</pre> &lt;/table&gt;</pre>
</div>
<div class="span8"> <table class="table table-striped">
<table class="table table-striped"> <thead>
<thead> <tr>
<tr> <th>#</th>
<th>#</th> <th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}First Name{{/i}}</th> <th>{{_i}}Last Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th> <th>{{_i}}Username{{/i}}</th>
<th>{{_i}}Username{{/i}}</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <td>1</td>
<td>1</td> <td>Mark</td>
<td>Mark</td> <td>Otto</td>
<td>Otto</td> <td>@mdo</td>
<td>@mdo</td> </tr>
</tr> <tr>
<tr> <td>2</td>
<td>2</td> <td>Jacob</td>
<td>Jacob</td> <td>Thornton</td>
<td>Thornton</td> <td>@fat</td>
<td>@fat</td> </tr>
</tr> <tr>
<tr> <td>3</td>
<td>3</td> <td>Larry</td>
<td>Larry</td> <td>the Bird</td>
<td>the Bird</td> <td>@twitter</td>
<td>@twitter</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
</div>
</div>
<h3>3. {{_i}}Bordered table{{/i}}</h3> <h3>3. {{_i}}Bordered table{{/i}}</h3>
<div class="row"> <p>{{_i}}Add borders around the entire table and rounded corners for aesthetic purposes.{{/i}}</p>
<div class="span4">
<p>{{_i}}Add borders around the entire table and rounded corners for aesthetic purposes.{{/i}}</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;table class="table table-bordered"&gt; &lt;table class="table table-bordered"&gt;
… …
&lt;/table&gt;</pre> &lt;/table&gt;</pre>
</div>
<div class="span8">
<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>
</div>
<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>
<h3>4. {{_i}}Condensed table{{/i}}</h3> <h3>4. {{_i}}Condensed table{{/i}}</h3>
<div class="row"> <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="span4">
<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>
<pre class="prettyprint linenums" style="margin-bottom: 18px;"> <pre class="prettyprint linenums" style="margin-bottom: 18px;">
&lt;table class="table table-condensed"&gt; &lt;table class="table table-condensed"&gt;
… …
&lt;/table&gt;</pre> &lt;/table&gt;</pre>
</div> <table class="table table-condensed">
<div class="span8"> <thead>
<table class="table table-condensed"> <tr>
<thead> <th>#</th>
<tr> <th>{{_i}}First Name{{/i}}</th>
<th>#</th> <th>{{_i}}Last Name{{/i}}</th>
<th>{{_i}}First Name{{/i}}</th> <th>{{_i}}Username{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th> </tr>
<th>{{_i}}Username{{/i}}</th> </thead>
</tr> <tbody>
</thead> <tr>
<tbody> <td>1</td>
<tr> <td>Mark</td>
<td>1</td> <td>Otto</td>
<td>Mark</td> <td>@mdo</td>
<td>Otto</td> </tr>
<td>@mdo</td> <tr>
</tr> <td>2</td>
<tr> <td>Jacob</td>
<td>2</td> <td>Thornton</td>
<td>Jacob</td> <td>@fat</td>
<td>Thornton</td> </tr>
<td>@fat</td> <tr>
</tr> <td>3</td>
<tr> <td colspan="2">Larry the Bird</td>
<td>3</td> <td>@twitter</td>
<td colspan="2">Larry the Bird</td> </tr>
<td>@twitter</td> </tbody>
</tr> </table>
</tbody>
</table>
</div>
</div>
<h3>5. {{_i}}Combine them all!{{/i}}</h3> <h3>5. {{_i}}Combine them all!{{/i}}</h3>
<div class="row"> <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="span4">
<p>{{_i}}Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.{{/i}}</p>
<pre class="prettyprint linenums" style="margin-bottom: 18px;"> <pre class="prettyprint linenums" style="margin-bottom: 18px;">
&lt;table class="table table-striped table-bordered table-condensed"&gt; &lt;table class="table table-striped table-bordered table-condensed"&gt;
... ...
&lt;/table&gt;</pre> &lt;/table&gt;</pre>
</div> <table class="table table-striped table-bordered table-condensed">
<div class="span8"> <thead>
<table class="table table-striped table-bordered table-condensed"> <tr>
<thead> <th></th>
<tr> <th colspan="2">{{_i}}Full name{{/i}}</th>
<th></th> <th></th>
<th colspan="2">{{_i}}Full name{{/i}}</th> </tr>
<th></th> <tr>
</tr> <th>#</th>
<tr> <th>{{_i}}First Name{{/i}}</th>
<th>#</th> <th>{{_i}}Last Name{{/i}}</th>
<th>{{_i}}First Name{{/i}}</th> <th>{{_i}}Username{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th> </tr>
<th>{{_i}}Username{{/i}}</th> </thead>
</tr> <tbody>
</thead> <tr>
<tbody> <tr>
<tr> <td>1</td>
<tr> <td>Mark</td>
<td>1</td> <td>Otto</td>
<td>Mark</td> <td>@mdo</td>
<td>Otto</td> </tr>
<td>@mdo</td> <tr>
</tr> <td>2</td>
<tr> <td>Jacob</td>
<td>2</td> <td>Thornton</td>
<td>Jacob</td> <td>@fat</td>
<td>Thornton</td> </tr>
<td>@fat</td> <tr>
</tr> <td>3</td>
<tr> <td colspan="2">Larry the Bird</td>
<td>3</td> <td>@twitter</td>
<td colspan="2">Larry the Bird</td> </tr>
<td>@twitter</td> </tbody>
</tr> </table>
</tbody>
</table>
</div>
</div>
</section> </section>