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