]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
adding bordered table to docs and showing it works with colspan
authorMark Otto <markdotto@gmail.com>
Wed, 30 Nov 2011 07:16:38 +0000 (23:16 -0800)
committerMark Otto <markdotto@gmail.com>
Wed, 30 Nov 2011 07:16:38 +0000 (23:16 -0800)
docs/base-css.html

index bab55f0e44cef1dd68e2f280d405b70cefc544d9..7626d1668e8e7a14e2fa6bd778a780c049ebabde 100644 (file)
 &lt;table class="striped-table"&gt;
   ...
 &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>
   <table class="condensed-table">
     <thead>
 &lt;table class="condensed-table"&gt;
   ...
 &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>
   <table class="striped-table" id="sortTableExample">
     <thead>