From 7b665affd77c647111b089e4a178b09525a67863 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 8 Oct 2011 00:14:38 -0700 Subject: [PATCH] fix problems with scope in tables when using th in tbody --- bootstrap.css | 50 +++++++++++++++++++++++++++-------------------- bootstrap.min.css | 23 +++++++++++----------- docs/index.html | 36 ++++++++++++++++++++++++++++++++++ lib/tables.less | 31 ++++++++++++++++++++++------- 4 files changed, 101 insertions(+), 39 deletions(-) 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>
+

Example: Bordered table

+

Make your tables look just a wee bit sleeker by rounding their corners and adding borders on all sides.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameLanguage
1SomeOneEnglish
2JoeSixpackEnglish
3StuDentCode
+
+<table class="bordered-table">
+  ...
 </table>

Example: Zebra-striped

Get a little fancy with your tables by adding zebra-striping—just add the .zebra-striped class.

diff --git a/lib/tables.less b/lib/tables.less index 2781681cca..158f06d933 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -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; } }