]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
clear up table styles and docs to fix rowspan and colspan issues for bordered tables...
authorMark Otto <markotto@twitter.com>
Wed, 22 Feb 2012 07:00:02 +0000 (23:00 -0800)
committerMark Otto <markotto@twitter.com>
Wed, 22 Feb 2012 07:00:02 +0000 (23:00 -0800)
docs/assets/bootstrap.zip
docs/assets/css/bootstrap.css
docs/base-css.html
docs/templates/pages/base-css.mustache
less/tables.less

index 7cfe0eb399d2aab5ae6334da8866afab443b400a..baee1afdd945ca09017aa24d875b6e27cd2efb09 100644 (file)
Binary files a/docs/assets/bootstrap.zip and b/docs/assets/bootstrap.zip differ
index 912be887a374fc1c4e9d15a2a9065c530a760f05..45ae99964d07edd94153fce0c361dfd0ffaa1290 100644 (file)
@@ -1228,20 +1228,19 @@ table {
 }
 .table-bordered {
   border: 1px solid #ddd;
+  border-left: 0;
   border-collapse: separate;
   *border-collapse: collapsed;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
 }
-.table-bordered th + th,
-.table-bordered td + td,
-.table-bordered th + td,
-.table-bordered td + th {
+.table-bordered th, .table-bordered td {
   border-left: 1px solid #ddd;
 }
 .table-bordered thead:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child td {
   border-top: 0;
+  border-bottom: 1px solid #ddd;
 }
 .table-bordered thead:first-child tr:first-child th:first-child, .table-bordered tbody:first-child tr:first-child td:first-child {
   -webkit-border-radius: 4px 0 0 0;
index 79ea2ac55ad6281aa6db0add95ad9be1ff18f44f..3a6494ddc1d6283c4683c93287175ced0be58cbf 100644 (file)
@@ -571,7 +571,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
             <th>#</th>
             <th>First Name</th>
             <th>Last Name</th>
-            <th>Language</th>
+            <th>Username</th>
           </tr>
         </thead>
         <tbody>
@@ -579,19 +579,19 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
             <td>1</td>
             <td>Mark</td>
             <td>Otto</td>
-            <td>CSS</td>
+            <td>@mdo</td>
           </tr>
           <tr>
             <td>2</td>
             <td>Jacob</td>
             <td>Thornton</td>
-            <td>Javascript</td>
+            <td>@fat</td>
           </tr>
           <tr>
             <td>3</td>
-            <td>Stu</td>
-            <td>Dent</td>
-            <td>HTML</td>
+            <td>Larry</td>
+            <td>the Bird</td>
+            <td>@twitter</td>
           </tr>
         </tbody>
       </table>
@@ -616,7 +616,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
             <th>#</th>
             <th>First Name</th>
             <th>Last Name</th>
-            <th>Language</th>
+            <th>Username</th>
           </tr>
         </thead>
         <tbody>
@@ -624,19 +624,19 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
             <td>1</td>
             <td>Mark</td>
             <td>Otto</td>
-            <td>CSS</td>
+            <td>@mdo</td>
           </tr>
           <tr>
             <td>2</td>
             <td>Jacob</td>
             <td>Thornton</td>
-            <td>Javascript</td>
+            <td>@fat</td>
           </tr>
           <tr>
             <td>3</td>
-            <td>Stu</td>
-            <td>Dent</td>
-            <td>HTML</td>
+            <td>Larry</td>
+            <td>the Bird</td>
+            <td>@twitter</td>
           </tr>
         </tbody>
       </table>
@@ -660,31 +660,31 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
             <th>#</th>
             <th>First Name</th>
             <th>Last Name</th>
-            <th>Language</th>
+            <th>Username</th>
           </tr>
         </thead>
         <tbody>
           <tr>
-            <td>1</td>
-            <td colspan="2">Mark Otto</td>
-            <td>CSS</td>
+            <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 rowspan="2">Javascript</td>
-          </tr>
-          </tr>
-            <td>3</td>
-            <td>Stu</td>
-            <td>Dent</td>
+            <td>@fat</td>
           </tr>
           <tr>
             <td>3</td>
-            <td>Brosef</td>
-            <td>Stalin</td>
-            <td>HTML</td>
+            <td colspan="2">Larry the Bird</td>
+            <td>@twitter</td>
           </tr>
         </tbody>
       </table>
@@ -708,7 +708,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
             <th>#</th>
             <th>First Name</th>
             <th>Last Name</th>
-            <th>Language</th>
+            <th>Username</th>
           </tr>
         </thead>
         <tbody>
@@ -716,19 +716,18 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
             <td>1</td>
             <td>Mark</td>
             <td>Otto</td>
-            <td>CSS</td>
+            <td>@mdo</td>
           </tr>
           <tr>
             <td>2</td>
             <td>Jacob</td>
             <td>Thornton</td>
-            <td>Javascript</td>
+            <td>@fat</td>
           </tr>
           <tr>
             <td>3</td>
-            <td>Stu</td>
-            <td>Dent</td>
-            <td>HTML</td>
+            <td colspan="2">Larry the Bird</td>
+            <td>@twitter</td>
           </tr>
         </tbody>
       </table>
@@ -749,37 +748,36 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
     <div class="span8">
       <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 class="yellow">First Name</th>
-            <th class="blue">Last Name</th>
-            <th class="green">Language</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>CSS</td>
+            <td>@mdo</td>
           </tr>
           <tr>
             <td>2</td>
             <td>Jacob</td>
             <td>Thornton</td>
-            <td>Javascript</td>
+            <td>@fat</td>
           </tr>
           <tr>
             <td>3</td>
-            <td>Stu</td>
-            <td>Dent</td>
-            <td>HTML</td>
-          </tr>
-          <tr>
-            <td>4</td>
-            <td>Brosef</td>
-            <td>Stalin</td>
-            <td>HTML</td>
+            <td colspan="2">Larry the Bird</td>
+            <td>@twitter</td>
           </tr>
         </tbody>
       </table>
index 8345e4a24845380a39492e32c71e28be5688ba2d..fde1e002ef3ed27d4ce2a3212fd8d5ed699b0bbf 100644 (file)
             <th>#</th>
             <th>{{_i}}First Name{{/i}}</th>
             <th>{{_i}}Last Name{{/i}}</th>
-            <th>{{_i}}Language{{/i}}</th>
+            <th>{{_i}}Username{{/i}}</th>
           </tr>
         </thead>
         <tbody>
             <td>1</td>
             <td>Mark</td>
             <td>Otto</td>
-            <td>CSS</td>
+            <td>@mdo</td>
           </tr>
           <tr>
             <td>2</td>
             <td>Jacob</td>
             <td>Thornton</td>
-            <td>Javascript</td>
+            <td>@fat</td>
           </tr>
           <tr>
             <td>3</td>
-            <td>Stu</td>
-            <td>Dent</td>
-            <td>HTML</td>
+            <td>Larry</td>
+            <td>the Bird</td>
+            <td>@twitter</td>
           </tr>
         </tbody>
       </table>
             <th>#</th>
             <th>{{_i}}First Name{{/i}}</th>
             <th>{{_i}}Last Name{{/i}}</th>
-            <th>{{_i}}Language{{/i}}</th>
+            <th>{{_i}}Username{{/i}}</th>
           </tr>
         </thead>
         <tbody>
             <td>1</td>
             <td>Mark</td>
             <td>Otto</td>
-            <td>CSS</td>
+            <td>@mdo</td>
           </tr>
           <tr>
             <td>2</td>
             <td>Jacob</td>
             <td>Thornton</td>
-            <td>Javascript</td>
+            <td>@fat</td>
           </tr>
           <tr>
             <td>3</td>
-            <td>Stu</td>
-            <td>Dent</td>
-            <td>HTML</td>
+            <td>Larry</td>
+            <td>the Bird</td>
+            <td>@twitter</td>
           </tr>
         </tbody>
       </table>
             <th>#</th>
             <th>{{_i}}First Name{{/i}}</th>
             <th>{{_i}}Last Name{{/i}}</th>
-            <th>{{_i}}Language{{/i}}</th>
+            <th>{{_i}}Username{{/i}}</th>
           </tr>
         </thead>
         <tbody>
             <td rowspan="2">1</td>
             <td>Mark</td>
             <td>Otto</td>
-            <td>CSS</td>
+            <td>@mdo</td>
           </tr>
           <tr>
             <td>Mark</td>
             <td>Otto</td>
-            <td>HTML</td>
+            <td>@TwBootstrap</td>
           </tr>
           <tr>
             <td>2</td>
             <td>Jacob</td>
             <td>Thornton</td>
-            <td rowspan="2">Javascript</td>
-          </tr>
-          </tr>
-            <td>3</td>
-            <td>Stu</td>
-            <td>Dent</td>
+            <td>@fat</td>
           </tr>
           <tr>
             <td>3</td>
-            <td>Brosef</td>
-            <td>Stalin</td>
-            <td>HTML</td>
+            <td colspan="2">Larry the Bird</td>
+            <td>@twitter</td>
           </tr>
         </tbody>
       </table>
             <th>#</th>
             <th>{{_i}}First Name{{/i}}</th>
             <th>{{_i}}Last Name{{/i}}</th>
-            <th>{{_i}}Language{{/i}}</th>
+            <th>{{_i}}Username{{/i}}</th>
           </tr>
         </thead>
         <tbody>
             <td>1</td>
             <td>Mark</td>
             <td>Otto</td>
-            <td>CSS</td>
+            <td>@mdo</td>
           </tr>
           <tr>
             <td>2</td>
             <td>Jacob</td>
             <td>Thornton</td>
-            <td>Javascript</td>
+            <td>@fat</td>
           </tr>
           <tr>
             <td>3</td>
-            <td>Stu</td>
-            <td>Dent</td>
-            <td>HTML</td>
+            <td colspan="2">Larry the Bird</td>
+            <td>@twitter</td>
           </tr>
         </tbody>
       </table>
     <div class="span8">
       <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 class="yellow">{{_i}}First Name{{/i}}</th>
-            <th class="blue">{{_i}}Last Name{{/i}}</th>
-            <th class="green">{{_i}}Language{{/i}}</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>CSS</td>
+            <td>@mdo</td>
           </tr>
           <tr>
             <td>2</td>
             <td>Jacob</td>
             <td>Thornton</td>
-            <td>Javascript</td>
+            <td>@fat</td>
           </tr>
           <tr>
             <td>3</td>
-            <td>Stu</td>
-            <td>Dent</td>
-            <td>HTML</td>
-          </tr>
-          <tr>
-            <td>4</td>
-            <td>Brosef</td>
-            <td>Stalin</td>
-            <td>HTML</td>
+            <td colspan="2">Larry the Bird</td>
+            <td>@twitter</td>
           </tr>
         </tbody>
       </table>
index 1342de2ff6589f73bef442c7e89f618da140b81c..d8bce582f0c708599847c5083e59d175ef30de60 100644 (file)
@@ -64,13 +64,12 @@ table {
 
 .table-bordered {
   border: 1px solid #ddd;
+  border-left: 0;
   border-collapse: separate; // Done so we can round those corners!
   *border-collapse: collapsed; // IE7 can't round corners anyway
   .border-radius(4px);
-  th + th,
-  td + td,
-  th + td,
-  td + th {
+  th,
+  td {
     border-left: 1px solid #ddd;
   }
   // Prevent a double border
@@ -78,6 +77,7 @@ table {
   tbody:first-child tr:first-child th,
   tbody:first-child tr:first-child td {
     border-top: 0;
+    border-bottom: 1px solid #ddd;
   }
   // For first th or td in the first row in the first thead or tbody
   thead:first-child tr:first-child th:first-child,