rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-30 12:24:19 +01:00
Code Issues Actions Packages Releases Activity

fix problems with scope in tables when using th in tbody

Browse Source
This commit is contained in:
Mark Otto 2011-10-08 00:14:38 -07:00
parent e025de9a83
commit 7b665affd7
4 changed files with 101 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
bootstrap.css vendored
View File

@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Fri Oct 7 23:55:26 PDT 2011
* Date: Sat Oct 8 00:14:02 PDT 2011
*/
/* Reset.less
* 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 {
width: 100%;
margin-bottom: 18px;
padding: 0;
border-collapse: separate;
*border-collapse: collapse;
/* IE7, collapse table to remove spacing */
font-size: 13px;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border-collapse: collapse;
}
table th, table td {
padding: 10px 10px 9px;
@ -1079,32 +1072,47 @@ table th {
}
table td {
vertical-align: top;
}
table th + th, table td + td {
border-left: 1px solid #ddd;
}
table tr td {
border-top: 1px solid #ddd;
}
table tr:first-child td {
table tbody th {
border-bottom: 0;
vertical-align: top;
}
.bordered-table {
border: 1px solid #ddd;
border-collapse: separate;
*border-collapse: collapse;
/* IE7, collapse table to remove spacing */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.bordered-table th + th, .bordered-table td + td, .bordered-table th + td {
border-left: 1px solid #ddd;
}
.bordered-table tr td {
border-top: 1px solid #ddd;
}
.bordered-table tr:first-child td {
border-top: 0;
}
table tbody tr:first-child td:first-child {
.bordered-table tbody tr:first-child td:first-child {
-webkit-border-radius: 4px 0 0 0;
-moz-border-radius: 4px 0 0 0;
border-radius: 4px 0 0 0;
}
table tbody tr:first-child td:last-child {
.bordered-table tbody tr:first-child td:last-child {
-webkit-border-radius: 0 4px 0 0;
-moz-border-radius: 0 4px 0 0;
border-radius: 0 4px 0 0;
}
table tbody tr:last-child td:first-child {
.bordered-table tbody tr:last-child td:first-child {
-webkit-border-radius: 0 0 0 4px;
-moz-border-radius: 0 0 0 4px;
border-radius: 0 0 0 4px;
}
table tbody tr:last-child td:last-child {
.bordered-table tbody tr:last-child td:last-child {
-webkit-border-radius: 0 0 4px 0;
-moz-border-radius: 0 0 4px 0;
border-radius: 0 0 4px 0;
@ -1157,10 +1165,10 @@ table .span15 {
table .span16 {
width: 620px;
}
.zebra-striped tbody tr:nth-child(odd) td {
.zebra-striped tbody tr:nth-child(odd) td, .zebra-striped tbody tr:nth-child(odd) th {
background-color: #f9f9f9;
}
.zebra-striped tbody tr:hover td {
.zebra-striped tbody tr:hover td, .zebra-striped tbody tr:hover th {
background-color: #f5f5f5;
}
table .header {

23
bootstrap.min.css vendored
View File

@ -180,16 +180,17 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado
.form-stacked .inputs-list{margin-bottom:0;}.form-stacked .inputs-list li{padding-top:0;}.form-stacked .inputs-list li label{font-weight:normal;padding-top:0;}
.form-stacked div.clearfix.error{padding-top:10px;padding-bottom:10px;padding-left:10px;margin-top:0;margin-left:-10px;}
.form-stacked .actions{margin-left:-20px;padding-left:20px;}
table{width:100%;margin-bottom:18px;padding:0;border-collapse:separate;*border-collapse:collapse;font-size:13px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}table th,table td{padding:10px 10px 9px;line-height:18px;text-align:left;}
table{width:100%;margin-bottom:18px;padding:0;font-size:13px;border-collapse:collapse;}table th,table td{padding:10px 10px 9px;line-height:18px;text-align:left;}
table th{padding-top:9px;font-weight:bold;vertical-align:middle;border-bottom:1px solid #ddd;}
table td{vertical-align:top;}
table th+th,table td+td{border-left:1px solid #ddd;}
table tr td{border-top:1px solid #ddd;}
table tr:first-child td{border-top:0;}
table tbody tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0;}
table tbody tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;}
table tbody tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;}
table tbody tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;}
table td{vertical-align:top;border-top:1px solid #ddd;}
table tbody th{border-bottom:0;vertical-align:top;}
.bordered-table{border:1px solid #ddd;border-collapse:separate;*border-collapse:collapse;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.bordered-table th+th,.bordered-table td+td,.bordered-table th+td{border-left:1px solid #ddd;}
.bordered-table tr td{border-top:1px solid #ddd;}
.bordered-table tr:first-child td{border-top:0;}
.bordered-table tbody tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0;}
.bordered-table tbody tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;}
.bordered-table tbody tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;}
.bordered-table tbody tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;}
table .span1{width:20px;}
table .span2{width:60px;}
table .span3{width:100px;}
@ -206,8 +207,8 @@ table .span13{width:500px;}
table .span14{width:540px;}
table .span15{width:580px;}
table .span16{width:620px;}
.zebra-striped tbody tr:nth-child(odd) td{background-color:#f9f9f9;}
.zebra-striped tbody tr:hover td{background-color:#f5f5f5;}
.zebra-striped tbody tr:nth-child(odd) td,.zebra-striped tbody tr:nth-child(odd) th{background-color:#f9f9f9;}
.zebra-striped tbody tr:hover td,.zebra-striped tbody tr:hover th{background-color:#f5f5f5;}
table .header{cursor:pointer;}table .header:after{content:"";float:right;margin-top:7px;border-width:0 4px 4px;border-style:solid;border-color:#000 transparent;visibility:hidden;}
table .headerSortUp,table .headerSortDown{background-color:rgba(141, 192, 219, 0.25);text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);}
table .header:hover:after{visibility:visible;}

36
docs/index.html
View File

@ -874,6 +874,42 @@
<pre class="prettyprint linenums">
&lt;table&gt;
...
&lt;/table&gt;</pre>
<h3>Example: Bordered table</h3>
<p>Make your tables look just a wee bit sleeker by rounding their corners and adding borders on all sides.</p>
<table class="bordered-table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Language</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Some</td>
<td>One</td>
<td>English</td>
</tr>
<tr>
<td>2</td>
<td>Joe</td>
<td>Sixpack</td>
<td>English</td>
</tr>
<tr>
<td>3</td>
<td>Stu</td>
<td>Dent</td>
<td>Code</td>
</tr>
</tbody>
</table>
<pre class="prettyprint linenums">
&lt;table class="bordered-table"&gt;
...
&lt;/table&gt;</pre>
<h3>Example: Zebra-striped</h3>
<p>Get a little fancy with your tables by adding zebra-striping&mdash;just add the <code>.zebra-striped</code> class.</p>

31
lib/tables.less
View File

@ -11,11 +11,8 @@ table {
width: 100%;
margin-bottom: @baseline;
padding: 0;
border-collapse: separate; // Done so we can round those corners!
*border-collapse: collapse; /* IE7, collapse table to remove spacing */
font-size: @basefont;
border: 1px solid #ddd;
.border-radius(4px);
border-collapse: collapse;
th, td {
padding: 10px 10px 9px;
line-height: @baseline;
@ -29,9 +26,27 @@ table {
}
td {
vertical-align: top;
border-top: 1px solid #ddd;
}
// When scoped to row, fix th in tbody
tbody th {
border-bottom: 0;
vertical-align: top;
}
}
// BORDERED VERSION
// ----------------
.bordered-table {
border: 1px solid #ddd;
border-collapse: separate; // Done so we can round those corners!
*border-collapse: collapse; /* IE7, collapse table to remove spacing */
.border-radius(4px);
th + th,
td + td {
td + td,
th + td {
border-left: 1px solid #ddd;
}
tr td {
@ -89,10 +104,12 @@ table {
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.zebra-striped {
tbody {
tr:nth-child(odd) td {
tr:nth-child(odd) td,
tr:nth-child(odd) th {
background-color: #f9f9f9;
}
tr:hover td {
tr:hover td,
tr:hover th {
background-color: #f5f5f5;
}
}