235 lines
4.5KB

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