tables.less 4.2 KB

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