tables.less 4.6 KB

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