diff options
| -rw-r--r-- | docs/base-css.html | 39 |
1 files changed, 37 insertions, 2 deletions
diff --git a/docs/base-css.html b/docs/base-css.html index bab55f0e4..7626d1668 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -630,7 +630,42 @@ <table class="striped-table"> ... </table></pre> - <h3>3. Condensed table</h3> + <h3>3. Bordered table</h3> + <p>Add borders around the entire table and between each row, plus a bit of rounded corners for aesthetic purposes.</p> + <table class="bordered-table"> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Language</th> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td colspan="2">Some One</td> + <td>English</td> + </tr> + <tr> + <td colspan="2">2 Joe</td> + <td>Sixpack</td> + <td>English</td> + </tr> + <tr> + <td>3</td> + <td>Stu</td> + <td>Dent</td> + <td>Code</td> + </tr> + </tbody> + </table> + <p><strong>Note:</strong> Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.</p> +<pre class="prettyprint linenums"> +<table class="striped-table"> + ... +</table></pre> + <h3>4. Condensed table</h3> <p>Make your tables more compact by adding the <code>.condensed-table</code> class to cut table cell padding in half (from 10px to 5px).</p> <table class="condensed-table"> <thead> @@ -666,7 +701,7 @@ <table class="condensed-table"> ... </table></pre> - <h3>4. Striped table w/ TableSorter.js</h3> + <h3>5. Striped table w/ TableSorter.js</h3> <p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <a href="http://jquery.com">jQuery</a> and the <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p> <table class="striped-table" id="sortTableExample"> <thead> |