1// 2// Tables 3// -------------------------------------------------- 4 5 6table { 7 background-color: @table-bg; 8} 9caption { 10 padding-top: @table-cell-padding; 11 padding-bottom: @table-cell-padding; 12 color: @text-muted; 13 text-align: left; 14} 15th { 16 text-align: left; 17} 18 19 20// Baseline styles 21 22.table { 23 width: 100%; 24 max-width: 100%; 25 margin-bottom: @line-height-computed; 26 // Cells 27 > thead, 28 > tbody, 29 > tfoot { 30 > tr { 31 > th, 32 > td { 33 padding: @table-cell-padding; 34 line-height: @line-height-base; 35 vertical-align: top; 36 border-top: 1px solid @table-border-color; 37 } 38 } 39 } 40 // Bottom align for column headings 41 > thead > tr > th { 42 vertical-align: bottom; 43 border-bottom: 2px solid @table-border-color; 44 } 45 // Remove top border from thead by default 46 > caption + thead, 47 > colgroup + thead, 48 > thead:first-child { 49 > tr:first-child { 50 > th, 51 > td { 52 border-top: 0; 53 } 54 } 55 } 56 // Account for multiple tbody instances 57 > tbody + tbody { 58 border-top: 2px solid @table-border-color; 59 } 60 61 // Nesting 62 .table { 63 background-color: @body-bg; 64 } 65} 66 67 68// Condensed table w/ half padding 69 70.table-condensed { 71 > thead, 72 > tbody, 73 > tfoot { 74 > tr { 75 > th, 76 > td { 77 padding: @table-condensed-cell-padding; 78 } 79 } 80 } 81} 82 83 84// Bordered version 85// 86// Add borders all around the table and between all the columns. 87 88.table-bordered { 89 border: 1px solid @table-border-color; 90 > thead, 91 > tbody, 92 > tfoot { 93 > tr { 94 > th, 95 > td { 96 border: 1px solid @table-border-color; 97 } 98 } 99 } 100 > thead > tr { 101 > th, 102 > td { 103 border-bottom-width: 2px; 104 } 105 } 106} 107 108 109// Zebra-striping 110// 111// Default zebra-stripe styles (alternating gray and transparent backgrounds) 112 113.table-striped { 114 > tbody > tr:nth-of-type(odd) { 115 background-color: @table-bg-accent; 116 } 117} 118 119 120// Hover effect 121// 122// Placed here since it has to come after the potential zebra striping 123 124.table-hover { 125 > tbody > tr:hover { 126 background-color: @table-bg-hover; 127 } 128} 129 130 131// Table cell sizing 132// 133// Reset default table behavior 134 135table col[class*="col-"] { 136 position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623) 137 float: none; 138 display: table-column; 139} 140table { 141 td, 142 th { 143 &[class*="col-"] { 144 position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623) 145 float: none; 146 display: table-cell; 147 } 148 } 149} 150 151 152// Table backgrounds 153// 154// Exact selectors below required to override `.table-striped` and prevent 155// inheritance to nested tables. 156 157// Generate the contextual variants 158.table-row-variant(active; @table-bg-active); 159.table-row-variant(success; @state-success-bg); 160.table-row-variant(info; @state-info-bg); 161.table-row-variant(warning; @state-warning-bg); 162.table-row-variant(danger; @state-danger-bg); 163 164 165// Responsive tables 166// 167// Wrap your tables in `.table-responsive` and we'll make them mobile friendly 168// by enabling horizontal scrolling. Only applies <768px. Everything above that 169// will display normally. 170 171.table-responsive { 172 overflow-x: auto; 173 min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837) 174 175 @media screen and (max-width: @screen-xs-max) { 176 width: 100%; 177 margin-bottom: (@line-height-computed * 0.75); 178 overflow-y: hidden; 179 -ms-overflow-style: -ms-autohiding-scrollbar; 180 border: 1px solid @table-border-color; 181 182 // Tighten up spacing 183 > .table { 184 margin-bottom: 0; 185 186 // Ensure the content doesn't wrap 187 > thead, 188 > tbody, 189 > tfoot { 190 > tr { 191 > th, 192 > td { 193 white-space: nowrap; 194 } 195 } 196 } 197 } 198 199 // Special overrides for the bordered tables 200 > .table-bordered { 201 border: 0; 202 203 // Nuke the appropriate borders so that the parent can handle them 204 > thead, 205 > tbody, 206 > tfoot { 207 > tr { 208 > th:first-child, 209 > td:first-child { 210 border-left: 0; 211 } 212 > th:last-child, 213 > td:last-child { 214 border-right: 0; 215 } 216 } 217 } 218 219 // Only nuke the last row's bottom-border in `tbody` and `tfoot` since 220 // chances are there will be only one `tr` in a `thead` and that would 221 // remove the border altogether. 222 > tbody, 223 > tfoot { 224 > tr:last-child { 225 > th, 226 > td { 227 border-bottom: 0; 228 } 229 } 230 } 231 232 } 233 } 234} 235