Commit 0c8d2e37 authored by Mark Otto's avatar Mark Otto
Browse files

adding bordered table to docs and showing it works with colspan

parent 8f3150cf
Showing with 37 additions and 2 deletions
+37 -2
...@@ -630,7 +630,42 @@ ...@@ -630,7 +630,42 @@
<table class="striped-table"> <table class="striped-table">
... ...
&lt;/table&gt;</pre> &lt;/table&gt;</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">
&lt;table class="striped-table"&gt;
...
&lt;/table&gt;</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> <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"> <table class="condensed-table">
<thead> <thead>
...@@ -666,7 +701,7 @@ ...@@ -666,7 +701,7 @@
&lt;table class="condensed-table"&gt; &lt;table class="condensed-table"&gt;
... ...
&lt;/table&gt;</pre> &lt;/table&gt;</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> <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"> <table class="striped-table" id="sortTableExample">
<thead> <thead>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment