Skip to content

B
bootstrap
Commit 9b524a16 authored by Mark Otto's avatar Mark Otto
Browse files
Options

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

parent 917df670
Hide whitespace changes
Inline Side-by-side
Showing with 86 additions and 97 deletions
docs/assets/css/bootstrap.css
View file @ 9b524a16
......@@ -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;
......
docs/base-css.html
View file @ 9b524a16
......@@ -571,7 +571,7 @@ For example, <code>section</code> 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>
......
docs/templates/pages/base-css.mustache
View file @ 9b524a16
......@@ -495,7 +495,7 @@
<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>
......@@ -503,19 +503,19 @@
<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>
......@@ -540,7 +540,7 @@
<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>
......@@ -548,19 +548,19 @@
<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>
......@@ -584,7 +584,7 @@
<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>
......@@ -592,29 +592,23 @@
<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>
......@@ -638,7 +632,7 @@
<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>
......@@ -646,19 +640,18 @@
<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>
......@@ -679,37 +672,36 @@
<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>
......
less/tables.less
View file @ 9b524a16
......@@ -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,
......
Markdown is supported
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