tables.less 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  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, td {
  40. border-top: 0;
  41. }
  42. }
  43. }
  44. // Account for multiple tbody instances
  45. tbody + tbody {
  46. border-top: 2px solid @table-border-color;
  47. }
  48. // Nesting
  49. .table {
  50. background-color: @body-bg;
  51. }
  52. }
  53. // Condensed table w/ half padding
  54. .table-condensed {
  55. thead,
  56. tbody,
  57. tfoot {
  58. > tr {
  59. > th,
  60. > td {
  61. padding: @table-condensed-cell-padding;
  62. }
  63. }
  64. }
  65. }
  66. // Bordered version
  67. //
  68. // Add borders all around the table and between all the columns.
  69. .table-bordered {
  70. border: 1px solid @table-border-color;
  71. > thead,
  72. > tbody,
  73. > tfoot {
  74. > tr {
  75. > th,
  76. > td {
  77. border: 1px solid @table-border-color;
  78. }
  79. }
  80. }
  81. > thead {
  82. > tr {
  83. > th,
  84. > td {
  85. border-bottom-width: 2px;
  86. }
  87. }
  88. }
  89. }
  90. // Zebra-striping
  91. //
  92. // Default zebra-stripe styles (alternating gray and transparent backgrounds)
  93. .table-striped {
  94. > tbody {
  95. > tr:nth-child(odd) {
  96. > td,
  97. > th {
  98. background-color: @table-bg-accent;
  99. }
  100. }
  101. }
  102. }
  103. // Hover effect
  104. //
  105. // Placed here since it has to come after the potential zebra striping
  106. .table-hover {
  107. > tbody {
  108. > tr:hover {
  109. > td,
  110. > th {
  111. background-color: @table-bg-hover;
  112. }
  113. }
  114. }
  115. }
  116. // Table cell sizing
  117. //
  118. // Reset default table behavior
  119. table col[class*="col-"] {
  120. float: none;
  121. display: table-column;
  122. }
  123. table {
  124. td,
  125. th {
  126. &[class*="col-"] {
  127. float: none;
  128. display: table-cell;
  129. }
  130. }
  131. }
  132. // Table backgrounds
  133. //
  134. // Exact selectors below required to override `.table-striped` and prevent
  135. // inheritance to nested tables.
  136. .table > thead > tr,
  137. .table > tbody > tr,
  138. .table > tfoot > tr {
  139. > td.active,
  140. > th.active,
  141. &.active > td,
  142. &.active > th {
  143. background-color: @table-bg-active;
  144. }
  145. }
  146. // Generate the contextual variants
  147. .table-row-variant(success; @state-success-bg; @state-success-border);
  148. .table-row-variant(danger; @state-danger-bg; @state-danger-border);
  149. .table-row-variant(warning; @state-warning-bg; @state-warning-border);
  150. // Responsive tables
  151. //
  152. // Wrap your tables in `.table-scrollable` and we'll make them mobile friendly
  153. // by enabling horizontal scrolling. Only applies <768px. Everything above that
  154. // will display normally.
  155. @media (max-width: @screen-sm) {
  156. .table-responsive {
  157. width: 100%;
  158. margin-bottom: 15px;
  159. overflow-y: hidden;
  160. overflow-x: scroll;
  161. border: 1px solid @table-border-color;
  162. // Tighten up spacing and give a background color
  163. > .table {
  164. margin-bottom: 0;
  165. background-color: #fff;
  166. // Ensure the content doesn't wrap
  167. > thead,
  168. > tbody,
  169. > tfoot {
  170. > tr {
  171. > th,
  172. > td {
  173. white-space: nowrap;
  174. }
  175. }
  176. }
  177. }
  178. // Special overrides for the bordered tables
  179. > .table-bordered {
  180. border: 0;
  181. // Nuke the appropriate borders so that the parent can handle them
  182. > thead,
  183. > tbody,
  184. > tfoot {
  185. > tr {
  186. > th:first-child,
  187. > td:first-child {
  188. border-left: 0;
  189. }
  190. > th:last-child,
  191. > td:last-child {
  192. border-right: 0;
  193. }
  194. }
  195. > tr:last-child {
  196. > th,
  197. > td {
  198. border-bottom: 0;
  199. }
  200. }
  201. }
  202. }
  203. }
  204. }