1// 2// Tables 3// -------------------------------------------------- 4 5 6// BASE TABLES 7// ----------------- 8 9table { 10 max-width: 100%; 11 background-color: @tableBackground; 12 border-collapse: collapse; 13 border-spacing: 0; 14} 15 16// BASELINE STYLES 17// --------------- 18 19.table { 20 width: 100%; 21 margin-bottom: @baseLineHeight; 22 // Cells 23 th, 24 td { 25 padding: 8px; 26 line-height: @baseLineHeight; 27 text-align: left; 28 vertical-align: top; 29 border-top: 1px solid @tableBorder; 30 } 31 th { 32 font-weight: bold; 33 } 34 // Bottom align for column headings 35 thead th { 36 vertical-align: bottom; 37 } 38 // Remove top border from thead by default 39 caption + thead tr:first-child th, 40 caption + thead tr:first-child td, 41 colgroup + thead tr:first-child th, 42 colgroup + thead tr:first-child td, 43 thead:first-child tr:first-child th, 44 thead:first-child tr:first-child td { 45 border-top: 0; 46 } 47 // Account for multiple tbody instances 48 tbody + tbody { 49 border-top: 2px solid @tableBorder; 50 } 51 52 // Nesting 53 .table { 54 background-color: @bodyBackground; 55 } 56} 57 58 59 60// CONDENSED TABLE W/ HALF PADDING 61// ------------------------------- 62 63.table-condensed { 64 th, 65 td { 66 padding: 4px 5px; 67 } 68} 69 70 71// BORDERED VERSION 72// ---------------- 73 74.table-bordered { 75 border: 1px solid @tableBorder; 76 border-collapse: separate; // Done so we can round those corners! 77 *border-collapse: collapse; // IE7 can't round corners anyway 78 border-left: 0; 79 .border-radius(@baseBorderRadius); 80 th, 81 td { 82 border-left: 1px solid @tableBorder; 83 } 84 // Prevent a double border 85 caption + thead tr:first-child th, 86 caption + tbody tr:first-child th, 87 caption + tbody tr:first-child td, 88 colgroup + thead tr:first-child th, 89 colgroup + tbody tr:first-child th, 90 colgroup + tbody tr:first-child td, 91 thead:first-child tr:first-child th, 92 tbody:first-child tr:first-child th, 93 tbody:first-child tr:first-child td { 94 border-top: 0; 95 } 96 // For first th/td in the first row in the first thead or tbody 97 thead:first-child tr:first-child > th:first-child, 98 tbody:first-child tr:first-child > td:first-child, 99 tbody:first-child tr:first-child > th:first-child { 100 .border-top-left-radius(@baseBorderRadius); 101 } 102 // For last th/td in the first row in the first thead or tbody 103 thead:first-child tr:first-child > th:last-child, 104 tbody:first-child tr:first-child > td:last-child, 105 tbody:first-child tr:first-child > th:last-child { 106 .border-top-right-radius(@baseBorderRadius); 107 } 108 // For first th/td (can be either) in the last row in the last thead, tbody, and tfoot 109 thead:last-child tr:last-child > th:first-child, 110 tbody:last-child tr:last-child > td:first-child, 111 tbody:last-child tr:last-child > th:first-child, 112 tfoot:last-child tr:last-child > td:first-child, 113 tfoot:last-child tr:last-child > th:first-child { 114 .border-bottom-left-radius(@baseBorderRadius); 115 } 116 // For last th/td (can be either) in the last row in the last thead, tbody, and tfoot 117 thead:last-child tr:last-child > th:last-child, 118 tbody:last-child tr:last-child > td:last-child, 119 tbody:last-child tr:last-child > th:last-child, 120 tfoot:last-child tr:last-child > td:last-child, 121 tfoot:last-child tr:last-child > th:last-child { 122 .border-bottom-right-radius(@baseBorderRadius); 123 } 124 125 // Clear border-radius for first and last td in the last row in the last tbody for table with tfoot 126 tfoot + tbody:last-child tr:last-child td:first-child { 127 .border-bottom-left-radius(0); 128 } 129 tfoot + tbody:last-child tr:last-child td:last-child { 130 .border-bottom-right-radius(0); 131 } 132 133 // Special fixes to round the left border on the first td/th 134 caption + thead tr:first-child th:first-child, 135 caption + tbody tr:first-child td:first-child, 136 colgroup + thead tr:first-child th:first-child, 137 colgroup + tbody tr:first-child td:first-child { 138 .border-top-left-radius(@baseBorderRadius); 139 } 140 caption + thead tr:first-child th:last-child, 141 caption + tbody tr:first-child td:last-child, 142 colgroup + thead tr:first-child th:last-child, 143 colgroup + tbody tr:first-child td:last-child { 144 .border-top-right-radius(@baseBorderRadius); 145 } 146 147} 148 149 150 151 152// ZEBRA-STRIPING 153// -------------- 154 155// Default zebra-stripe styles (alternating gray and transparent backgrounds) 156.table-striped { 157 tbody { 158 > tr:nth-child(odd) > td, 159 > tr:nth-child(odd) > th { 160 background-color: @tableBackgroundAccent; 161 } 162 } 163} 164 165 166// HOVER EFFECT 167// ------------ 168// Placed here since it has to come after the potential zebra striping 169.table-hover { 170 tbody { 171 tr:hover > td, 172 tr:hover > th { 173 background-color: @tableBackgroundHover; 174 } 175 } 176} 177 178 179// TABLE CELL SIZING 180// ----------------- 181 182// Reset default grid behavior 183table td[class*="span"], 184table th[class*="span"], 185.row-fluid table td[class*="span"], 186.row-fluid table th[class*="span"] { 187 display: table-cell; 188 float: none; // undo default grid column styles 189 margin-left: 0; // undo default grid column styles 190} 191 192// Change the column widths to account for td/th padding 193.table td, 194.table th { 195 &.span1 { .tableColumns(1); } 196 &.span2 { .tableColumns(2); } 197 &.span3 { .tableColumns(3); } 198 &.span4 { .tableColumns(4); } 199 &.span5 { .tableColumns(5); } 200 &.span6 { .tableColumns(6); } 201 &.span7 { .tableColumns(7); } 202 &.span8 { .tableColumns(8); } 203 &.span9 { .tableColumns(9); } 204 &.span10 { .tableColumns(10); } 205 &.span11 { .tableColumns(11); } 206 &.span12 { .tableColumns(12); } 207} 208 209 210 211// TABLE BACKGROUNDS 212// ----------------- 213// Exact selectors below required to override .table-striped 214 215.table tbody tr { 216 &.success > td { 217 background-color: @successBackground; 218 } 219 &.error > td { 220 background-color: @errorBackground; 221 } 222 &.warning > td { 223 background-color: @warningBackground; 224 } 225 &.info > td { 226 background-color: @infoBackground; 227 } 228} 229 230// Hover states for .table-hover 231.table-hover tbody tr { 232 &.success:hover > td { 233 background-color: darken(@successBackground, 5%); 234 } 235 &.error:hover > td { 236 background-color: darken(@errorBackground, 5%); 237 } 238 &.warning:hover > td { 239 background-color: darken(@warningBackground, 5%); 240 } 241 &.info:hover > td { 242 background-color: darken(@infoBackground, 5%); 243 } 244} 245