Skip to content

Commit 7b665af

Browse files
mdomdo
committed
fix problems with scope in tables when using th in tbody
1 parent e025de9 commit 7b665af

File tree

4 files changed

+98
-36
lines changed

4 files changed

+98
-36
lines changed

‎bootstrap.css

Lines changed: 26 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* http://www.apache.org/licenses/LICENSE-2.0
77
*
88
* Designed and built with all the love in the world @twitter by @mdo and @fat.
9-
* Date: Fri Oct 7 23:55:26 PDT 2011
9+
* Date: Sat Oct 8 00:14:02 PDT 2011
1010
*/
1111
/* Reset.less
1212
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
@@ -1056,15 +1056,8 @@ table {
10561056
width: 100%;
10571057
margin-bottom: 18px;
10581058
padding: 0;
1059-
border-collapse: separate;
1060-
*border-collapse: collapse;
1061-
/* IE7, collapse table to remove spacing */
1062-
10631059
font-size: 13px;
1064-
border: 1px solid #ddd;
1065-
-webkit-border-radius: 4px;
1066-
-moz-border-radius: 4px;
1067-
border-radius: 4px;
1060+
border-collapse: collapse;
10681061
}
10691062
table th, table td {
10701063
padding: 10px 10px 9px;
@@ -1079,32 +1072,47 @@ table th {
10791072
}
10801073
table td {
10811074
vertical-align: top;
1075+
border-top: 1px solid #ddd;
1076+
}
1077+
table tbody th {
1078+
border-bottom: 0;
1079+
vertical-align: top;
1080+
}
1081+
.bordered-table {
1082+
border: 1px solid #ddd;
1083+
border-collapse: separate;
1084+
*border-collapse: collapse;
1085+
/* IE7, collapse table to remove spacing */
1086+
1087+
-webkit-border-radius: 4px;
1088+
-moz-border-radius: 4px;
1089+
border-radius: 4px;
10821090
}
1083-
table th + th, table td + td {
1091+
.bordered-table th + th, .bordered-table td + td, .bordered-table th + td {
10841092
border-left: 1px solid #ddd;
10851093
}
1086-
table tr td {
1094+
.bordered-table tr td {
10871095
border-top: 1px solid #ddd;
10881096
}
1089-
table tr:first-child td {
1097+
.bordered-table tr:first-child td {
10901098
border-top: 0;
10911099
}
1092-
table tbody tr:first-child td:first-child {
1100+
.bordered-table tbody tr:first-child td:first-child {
10931101
-webkit-border-radius: 4px 0 0 0;
10941102
-moz-border-radius: 4px 0 0 0;
10951103
border-radius: 4px 0 0 0;
10961104
}
1097-
table tbody tr:first-child td:last-child {
1105+
.bordered-table tbody tr:first-child td:last-child {
10981106
-webkit-border-radius: 0 4px 0 0;
10991107
-moz-border-radius: 0 4px 0 0;
11001108
border-radius: 0 4px 0 0;
11011109
}
1102-
table tbody tr:last-child td:first-child {
1110+
.bordered-table tbody tr:last-child td:first-child {
11031111
-webkit-border-radius: 0 0 0 4px;
11041112
-moz-border-radius: 0 0 0 4px;
11051113
border-radius: 0 0 0 4px;
11061114
}
1107-
table tbody tr:last-child td:last-child {
1115+
.bordered-table tbody tr:last-child td:last-child {
11081116
-webkit-border-radius: 0 0 4px 0;
11091117
-moz-border-radius: 0 0 4px 0;
11101118
border-radius: 0 0 4px 0;
@@ -1157,10 +1165,10 @@ table .span15 {
11571165
table .span16 {
11581166
width: 620px;
11591167
}
1160-
.zebra-striped tbody tr:nth-child(odd) td {
1168+
.zebra-striped tbody tr:nth-child(odd) td, .zebra-striped tbody tr:nth-child(odd) th {
11611169
background-color: #f9f9f9;
11621170
}
1163-
.zebra-striped tbody tr:hover td {
1171+
.zebra-striped tbody tr:hover td, .zebra-striped tbody tr:hover th {
11641172
background-color: #f5f5f5;
11651173
}
11661174
table .header {

‎bootstrap.min.css

Lines changed: 12 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -874,6 +874,42 @@ <h3>Example: Default table styles</h3>
874874
<pre class="prettyprint linenums">
875875
&lt;table&gt;
876876
...
877+
&lt;/table&gt;</pre>
878+
<h3>Example: Bordered table</h3>
879+
<p>Make your tables look just a wee bit sleeker by rounding their corners and adding borders on all sides.</p>
880+
<table class="bordered-table">
881+
<thead>
882+
<tr>
883+
<th>#</th>
884+
<th>First Name</th>
885+
<th>Last Name</th>
886+
<th>Language</th>
887+
</tr>
888+
</thead>
889+
<tbody>
890+
<tr>
891+
<td>1</td>
892+
<td>Some</td>
893+
<td>One</td>
894+
<td>English</td>
895+
</tr>
896+
<tr>
897+
<td>2</td>
898+
<td>Joe</td>
899+
<td>Sixpack</td>
900+
<td>English</td>
901+
</tr>
902+
<tr>
903+
<td>3</td>
904+
<td>Stu</td>
905+
<td>Dent</td>
906+
<td>Code</td>
907+
</tr>
908+
</tbody>
909+
</table>
910+
<pre class="prettyprint linenums">
911+
&lt;table class="bordered-table"&gt;
912+
...
877913
&lt;/table&gt;</pre>
878914
<h3>Example: Zebra-striped</h3>
879915
<p>Get a little fancy with your tables by adding zebra-striping&mdash;just add the <code>.zebra-striped</code> class.</p>

‎lib/tables.less

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,8 @@ table {
1111
width: 100%;
1212
margin-bottom: @baseline;
1313
padding: 0;
14-
border-collapse: separate; // Done so we can round those corners!
15-
*border-collapse: collapse; /* IE7, collapse table to remove spacing */
1614
font-size: @basefont;
17-
border: 1px solid #ddd;
18-
.border-radius(4px);
15+
border-collapse: collapse;
1916
th, td {
2017
padding: 10px 10px 9px;
2118
line-height: @baseline;
@@ -29,9 +26,27 @@ table {
2926
}
3027
td {
3128
vertical-align: top;
29+
border-top: 1px solid #ddd;
30+
}
31+
// When scoped to row, fix th in tbody
32+
tbody th {
33+
border-bottom: 0;
34+
vertical-align: top;
3235
}
36+
}
37+
38+
39+
// BORDERED VERSION
40+
// ----------------
41+
42+
.bordered-table {
43+
border: 1px solid #ddd;
44+
border-collapse: separate; // Done so we can round those corners!
45+
*border-collapse: collapse; /* IE7, collapse table to remove spacing */
46+
.border-radius(4px);
3347
th + th,
34-
td + td {
48+
td + td,
49+
th + td {
3550
border-left: 1px solid #ddd;
3651
}
3752
tr td {
@@ -89,10 +104,12 @@ table {
89104
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
90105
.zebra-striped {
91106
tbody {
92-
tr:nth-child(odd) td {
107+
tr:nth-child(odd) td,
108+
tr:nth-child(odd) th {
93109
background-color: #f9f9f9;
94110
}
95-
tr:hover td {
111+
tr:hover td,
112+
tr:hover th {
96113
background-color: #f5f5f5;
97114
}
98115
}

0 commit comments

Comments
 (0)