Skip to content
GitLab
Commit 9b524a16 authored by Mark Otto's avatar Mark Otto
Browse files

clear up table styles and docs to fix rowspan and colspan issues for bordered tables, per #1918

parent 917df670
1 merge request!1952Tabulation navigation with Typeahead
Hide whitespace changes
Inline Side-by-side
Showing
with 86 additions and 97 deletions
+86 -97
docs/assets/bootstrap.zip
+ 0
- 0
View file @ 9b524a16
No preview for this file type
docs/assets/css/bootstrap.css
+ 3
- 4
View file @ 9b524a16
...@@ -1228,20 +1228,19 @@ table { ...@@ -1228,20 +1228,19 @@ table {
} }
.table-bordered { .table-bordered {
border: 1px solid #ddd; border: 1px solid #ddd;
border-left: 0;
border-collapse: separate; border-collapse: separate;
*border-collapse: collapsed; *border-collapse: collapsed;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
} }
.table-bordered th + th, .table-bordered th, .table-bordered td {
.table-bordered td + td,
.table-bordered th + td,
.table-bordered td + th {
border-left: 1px solid #ddd; 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 { .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-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 { .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; -webkit-border-radius: 4px 0 0 0;
......
docs/base-css.html
+ 43
- 45
View file @ 9b524a16
...@@ -571,7 +571,7 @@ For example, <code>section</code> should be wrapped as inline. ...@@ -571,7 +571,7 @@ For example, <code>section</code> should be wrapped as inline.
<th>#</th> <th>#</th>
<th>First Name</th> <th>First Name</th>
<th>Last Name</th> <th>Last Name</th>
<th>Language</th> <th>Username</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -579,19 +579,19 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -579,19 +579,19 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<td>1</td> <td>1</td>
<td>Mark</td> <td>Mark</td>
<td>Otto</td> <td>Otto</td>
<td>CSS</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>Javascript</td> <td>@fat</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Stu</td> <td>Larry</td>
<td>Dent</td> <td>the Bird</td>
<td>HTML</td> <td>@twitter</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -616,7 +616,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -616,7 +616,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<th>#</th> <th>#</th>
<th>First Name</th> <th>First Name</th>
<th>Last Name</th> <th>Last Name</th>
<th>Language</th> <th>Username</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -624,19 +624,19 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -624,19 +624,19 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<td>1</td> <td>1</td>
<td>Mark</td> <td>Mark</td>
<td>Otto</td> <td>Otto</td>
<td>CSS</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>Javascript</td> <td>@fat</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Stu</td> <td>Larry</td>
<td>Dent</td> <td>the Bird</td>
<td>HTML</td> <td>@twitter</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -660,31 +660,31 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -660,31 +660,31 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<th>#</th> <th>#</th>
<th>First Name</th> <th>First Name</th>
<th>Last Name</th> <th>Last Name</th>
<th>Language</th> <th>Username</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>1</td> <td rowspan="2">1</td>
<td colspan="2">Mark Otto</td> <td>Mark</td>
<td>CSS</td> <td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr> </tr>
<tr> <tr>
<td>2</td> <td>2</td>
<td>Jacob</td> <td>Jacob</td>
<td>Thornton</td> <td>Thornton</td>
<td rowspan="2">Javascript</td> <td>@fat</td>
</tr>
</tr>
<td>3</td>
<td>Stu</td>
<td>Dent</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Brosef</td> <td colspan="2">Larry the Bird</td>
<td>Stalin</td> <td>@twitter</td>
<td>HTML</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -708,7 +708,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -708,7 +708,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<th>#</th> <th>#</th>
<th>First Name</th> <th>First Name</th>
<th>Last Name</th> <th>Last Name</th>
<th>Language</th> <th>Username</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -716,19 +716,18 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -716,19 +716,18 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<td>1</td> <td>1</td>
<td>Mark</td> <td>Mark</td>
<td>Otto</td> <td>Otto</td>
<td>CSS</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>Javascript</td> <td>@fat</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Stu</td> <td colspan="2">Larry the Bird</td>
<td>Dent</td> <td>@twitter</td>
<td>HTML</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -749,37 +748,36 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -749,37 +748,36 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<div class="span8"> <div class="span8">
<table class="table table-striped table-bordered table-condensed"> <table class="table table-striped table-bordered table-condensed">
<thead> <thead>
<tr>
<th></th>
<th colspan="2">Full name</th>
<th></th>
</tr>
<tr> <tr>
<th>#</th> <th>#</th>
<th class="yellow">First Name</th> <th>First Name</th>
<th class="blue">Last Name</th> <th>Last Name</th>
<th class="green">Language</th> <th>Username</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr>
<tr> <tr>
<td>1</td> <td>1</td>
<td>Mark</td> <td>Mark</td>
<td>Otto</td> <td>Otto</td>
<td>CSS</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>Javascript</td> <td>@fat</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Stu</td> <td colspan="2">Larry the Bird</td>
<td>Dent</td> <td>@twitter</td>
<td>HTML</td>
</tr>
<tr>
<td>4</td>
<td>Brosef</td>
<td>Stalin</td>
<td>HTML</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
......
docs/templates/pages/base-css.mustache
+ 36
- 44
View file @ 9b524a16
...@@ -495,7 +495,7 @@ ...@@ -495,7 +495,7 @@
<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}}Language{{/i}}</th> <th>{{_i}}Username{{/i}}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -503,19 +503,19 @@ ...@@ -503,19 +503,19 @@
<td>1</td> <td>1</td>
<td>Mark</td> <td>Mark</td>
<td>Otto</td> <td>Otto</td>
<td>CSS</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>Javascript</td> <td>@fat</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Stu</td> <td>Larry</td>
<td>Dent</td> <td>the Bird</td>
<td>HTML</td> <td>@twitter</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -540,7 +540,7 @@ ...@@ -540,7 +540,7 @@
<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}}Language{{/i}}</th> <th>{{_i}}Username{{/i}}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -548,19 +548,19 @@ ...@@ -548,19 +548,19 @@
<td>1</td> <td>1</td>
<td>Mark</td> <td>Mark</td>
<td>Otto</td> <td>Otto</td>
<td>CSS</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>Javascript</td> <td>@fat</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Stu</td> <td>Larry</td>
<td>Dent</td> <td>the Bird</td>
<td>HTML</td> <td>@twitter</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -584,7 +584,7 @@ ...@@ -584,7 +584,7 @@
<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}}Language{{/i}}</th> <th>{{_i}}Username{{/i}}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -592,29 +592,23 @@ ...@@ -592,29 +592,23 @@
<td rowspan="2">1</td> <td rowspan="2">1</td>
<td>Mark</td> <td>Mark</td>
<td>Otto</td> <td>Otto</td>
<td>CSS</td> <td>@mdo</td>
</tr> </tr>
<tr> <tr>
<td>Mark</td> <td>Mark</td>
<td>Otto</td> <td>Otto</td>
<td>HTML</td> <td>@TwBootstrap</td>
</tr> </tr>
<tr> <tr>
<td>2</td> <td>2</td>
<td>Jacob</td> <td>Jacob</td>
<td>Thornton</td> <td>Thornton</td>
<td rowspan="2">Javascript</td> <td>@fat</td>
</tr>
</tr>
<td>3</td>
<td>Stu</td>
<td>Dent</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Brosef</td> <td colspan="2">Larry the Bird</td>
<td>Stalin</td> <td>@twitter</td>
<td>HTML</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -638,7 +632,7 @@ ...@@ -638,7 +632,7 @@
<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}}Language{{/i}}</th> <th>{{_i}}Username{{/i}}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -646,19 +640,18 @@ ...@@ -646,19 +640,18 @@
<td>1</td> <td>1</td>
<td>Mark</td> <td>Mark</td>
<td>Otto</td> <td>Otto</td>
<td>CSS</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>Javascript</td> <td>@fat</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Stu</td> <td colspan="2">Larry the Bird</td>
<td>Dent</td> <td>@twitter</td>
<td>HTML</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -679,37 +672,36 @@ ...@@ -679,37 +672,36 @@
<div class="span8"> <div class="span8">
<table class="table table-striped table-bordered table-condensed"> <table class="table table-striped table-bordered table-condensed">
<thead> <thead>
<tr>
<th></th>
<th colspan="2">{{_i}}Full name{{/i}}</th>
<th></th>
</tr>
<tr> <tr>
<th>#</th> <th>#</th>
<th class="yellow">{{_i}}First Name{{/i}}</th> <th>{{_i}}First Name{{/i}}</th>
<th class="blue">{{_i}}Last Name{{/i}}</th> <th>{{_i}}Last Name{{/i}}</th>
<th class="green">{{_i}}Language{{/i}}</th> <th>{{_i}}Username{{/i}}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr>
<tr> <tr>
<td>1</td> <td>1</td>
<td>Mark</td> <td>Mark</td>
<td>Otto</td> <td>Otto</td>
<td>CSS</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>Javascript</td> <td>@fat</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Stu</td> <td colspan="2">Larry the Bird</td>
<td>Dent</td> <td>@twitter</td>
<td>HTML</td>
</tr>
<tr>
<td>4</td>
<td>Brosef</td>
<td>Stalin</td>
<td>HTML</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
......
less/tables.less
+ 4
- 4
View file @ 9b524a16
...@@ -64,13 +64,12 @@ table { ...@@ -64,13 +64,12 @@ table {
.table-bordered { .table-bordered {
border: 1px solid #ddd; border: 1px solid #ddd;
border-left: 0;
border-collapse: separate; // Done so we can round those corners! border-collapse: separate; // Done so we can round those corners!
*border-collapse: collapsed; // IE7 can't round corners anyway *border-collapse: collapsed; // IE7 can't round corners anyway
.border-radius(4px); .border-radius(4px);
th + th, th,
td + td, td {
th + td,
td + th {
border-left: 1px solid #ddd; border-left: 1px solid #ddd;
} }
// Prevent a double border // Prevent a double border
...@@ -78,6 +77,7 @@ table { ...@@ -78,6 +77,7 @@ table {
tbody:first-child tr:first-child th, tbody:first-child tr:first-child th,
tbody:first-child tr:first-child td { tbody:first-child tr:first-child td {
border-top: 0; border-top: 0;
border-bottom: 1px solid #ddd;
} }
// For first th or td in the first row in the first thead or tbody // For first th or td in the first row in the first thead or tbody
thead:first-child tr:first-child th:first-child, thead:first-child tr:first-child th:first-child,
......
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