diff --git a/bootstrap.css b/bootstrap.css index 1bc4a33c08..4eca09e693 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -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 { diff --git a/bootstrap.min.css b/bootstrap.min.css index 913dd2631e..683f4b789a 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -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;} diff --git a/docs/index.html b/docs/index.html index 4f895e081d..ea80e965cb 100644 --- a/docs/index.html +++ b/docs/index.html @@ -874,6 +874,42 @@
<table> ... +</table>+
Make your tables look just a wee bit sleeker by rounding their corners and adding borders on all sides.
+# | +First Name | +Last Name | +Language | +
---|---|---|---|
1 | +Some | +One | +English | +
2 | +Joe | +Sixpack | +English | +
3 | +Stu | +Dent | +Code | +
+<table class="bordered-table"> + ... </table>
Get a little fancy with your tables by adding zebra-striping—just add the .zebra-striped
class.