rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

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

Browse Source
This commit is contained in:
Mark Otto 2012-02-21 23:00:02 -08:00
parent 917df6703c
commit 9b524a16e9
5 changed files with 86 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/assets/bootstrap.zip
View File

Binary file not shown.

7
docs/assets/css/bootstrap.css vendored
View 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;

88
docs/base-css.html
View File

@ -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>

80
docs/templates/pages/base-css.mustache vendored
View File

@ -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>

8
less/tables.less
View 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,