tables.less 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. //
  2. // Tables
  3. // --------------------------------------------------
  4. // BASE TABLES
  5. // -----------------
  6. table {
  7. max-width: 100%;
  8. background-color: @tableBackground;
  9. border-collapse: collapse;
  10. border-spacing: 0;
  11. }
  12. // BASELINE STYLES
  13. // ---------------
  14. .table {
  15. width: 100%;
  16. margin-bottom: @baseLineHeight;
  17. // Cells
  18. th,
  19. td {
  20. padding: 8px;
  21. line-height: @baseLineHeight;
  22. text-align: left;
  23. vertical-align: top;
  24. border-top: 1px solid @tableBorder;
  25. }
  26. th {
  27. font-weight: bold;
  28. }
  29. // Bottom align for column headings
  30. thead th {
  31. vertical-align: bottom;
  32. }
  33. // Remove top border from thead by default
  34. caption + thead tr:first-child th,
  35. caption + thead tr:first-child td,
  36. colgroup + thead tr:first-child th,
  37. colgroup + thead tr:first-child td,
  38. thead:first-child tr:first-child th,
  39. thead:first-child tr:first-child td {
  40. border-top: 0;
  41. }
  42. // Account for multiple tbody instances
  43. tbody + tbody {
  44. border-top: 2px solid @tableBorder;
  45. }
  46. // Nesting
  47. .table {
  48. background-color: @bodyBackground;
  49. }
  50. }
  51. // CONDENSED TABLE W/ HALF PADDING
  52. // -------------------------------
  53. .table-condensed {
  54. th,
  55. td {
  56. padding: 4px 5px;
  57. }
  58. }
  59. // BORDERED VERSION
  60. // ----------------
  61. .table-bordered {
  62. border: 1px solid @tableBorder;
  63. border-collapse: separate; // Done so we can round those corners!
  64. *border-collapse: collapse; // IE7 can't round corners anyway
  65. border-left: 0;
  66. .border-radius(@baseBorderRadius);
  67. th,
  68. td {
  69. border-left: 1px solid @tableBorder;
  70. }
  71. // Prevent a double border
  72. caption + thead tr:first-child th,
  73. caption + tbody tr:first-child th,
  74. caption + tbody tr:first-child td,
  75. colgroup + thead tr:first-child th,
  76. colgroup + tbody tr:first-child th,
  77. colgroup + tbody tr:first-child td,
  78. thead:first-child tr:first-child th,
  79. tbody:first-child tr:first-child th,
  80. tbody:first-child tr:first-child td {
  81. border-top: 0;
  82. }
  83. // For first th/td in the first row in the first thead or tbody
  84. thead:first-child tr:first-child > th:first-child,
  85. tbody:first-child tr:first-child > td:first-child,
  86. tbody:first-child tr:first-child > th:first-child {
  87. .border-top-left-radius(@baseBorderRadius);
  88. }
  89. // For last th/td in the first row in the first thead or tbody
  90. thead:first-child tr:first-child > th:last-child,
  91. tbody:first-child tr:first-child > td:last-child,
  92. tbody:first-child tr:first-child > th:last-child {
  93. .border-top-right-radius(@baseBorderRadius);
  94. }
  95. // For first th/td (can be either) in the last row in the last thead, tbody, and tfoot
  96. thead:last-child tr:last-child > th:first-child,
  97. tbody:last-child tr:last-child > td:first-child,
  98. tbody:last-child tr:last-child > th:first-child,
  99. tfoot:last-child tr:last-child > td:first-child,
  100. tfoot:last-child tr:last-child > th:first-child {
  101. .border-bottom-left-radius(@baseBorderRadius);
  102. }
  103. // For last th/td (can be either) in the last row in the last thead, tbody, and tfoot
  104. thead:last-child tr:last-child > th:last-child,
  105. tbody:last-child tr:last-child > td:last-child,
  106. tbody:last-child tr:last-child > th:last-child,
  107. tfoot:last-child tr:last-child > td:last-child,
  108. tfoot:last-child tr:last-child > th:last-child {
  109. .border-bottom-right-radius(@baseBorderRadius);
  110. }
  111. // Clear border-radius for first and last td in the last row in the last tbody for table with tfoot
  112. tfoot + tbody:last-child tr:last-child td:first-child {
  113. .border-bottom-left-radius(0);
  114. }
  115. tfoot + tbody:last-child tr:last-child td:last-child {
  116. .border-bottom-right-radius(0);
  117. }
  118. // Special fixes to round the left border on the first td/th
  119. caption + thead tr:first-child th:first-child,
  120. caption + tbody tr:first-child td:first-child,
  121. colgroup + thead tr:first-child th:first-child,
  122. colgroup + tbody tr:first-child td:first-child {
  123. .border-top-left-radius(@baseBorderRadius);
  124. }
  125. caption + thead tr:first-child th:last-child,
  126. caption + tbody tr:first-child td:last-child,
  127. colgroup + thead tr:first-child th:last-child,
  128. colgroup + tbody tr:first-child td:last-child {
  129. .border-top-right-radius(@baseBorderRadius);
  130. }
  131. }
  132. // ZEBRA-STRIPING
  133. // --------------
  134. // Default zebra-stripe styles (alternating gray and transparent backgrounds)
  135. .table-striped {
  136. tbody {
  137. > tr:nth-child(odd) > td,
  138. > tr:nth-child(odd) > th {
  139. background-color: @tableBackgroundAccent;
  140. }
  141. }
  142. }
  143. // HOVER EFFECT
  144. // ------------
  145. // Placed here since it has to come after the potential zebra striping
  146. .table-hover {
  147. tbody {
  148. tr:hover > td,
  149. tr:hover > th {
  150. background-color: @tableBackgroundHover;
  151. }
  152. }
  153. }
  154. // TABLE CELL SIZING
  155. // -----------------
  156. // Reset default grid behavior
  157. table td[class*="span"],
  158. table th[class*="span"],
  159. .row-fluid table td[class*="span"],
  160. .row-fluid table th[class*="span"] {
  161. display: table-cell;
  162. float: none; // undo default grid column styles
  163. margin-left: 0; // undo default grid column styles
  164. }
  165. // Change the column widths to account for td/th padding
  166. .table td,
  167. .table th {
  168. &.span1 { .tableColumns(1); }
  169. &.span2 { .tableColumns(2); }
  170. &.span3 { .tableColumns(3); }
  171. &.span4 { .tableColumns(4); }
  172. &.span5 { .tableColumns(5); }
  173. &.span6 { .tableColumns(6); }
  174. &.span7 { .tableColumns(7); }
  175. &.span8 { .tableColumns(8); }
  176. &.span9 { .tableColumns(9); }
  177. &.span10 { .tableColumns(10); }
  178. &.span11 { .tableColumns(11); }
  179. &.span12 { .tableColumns(12); }
  180. }
  181. // TABLE BACKGROUNDS
  182. // -----------------
  183. // Exact selectors below required to override .table-striped
  184. .table tbody tr {
  185. &.success > td {
  186. background-color: @successBackground;
  187. }
  188. &.error > td {
  189. background-color: @errorBackground;
  190. }
  191. &.warning > td {
  192. background-color: @warningBackground;
  193. }
  194. &.info > td {
  195. background-color: @infoBackground;
  196. }
  197. }
  198. // Hover states for .table-hover
  199. .table-hover tbody tr {
  200. &.success:hover > td {
  201. background-color: darken(@successBackground, 5%);
  202. }
  203. &.error:hover > td {
  204. background-color: darken(@errorBackground, 5%);
  205. }
  206. &.warning:hover > td {
  207. background-color: darken(@warningBackground, 5%);
  208. }
  209. &.info:hover > td {
  210. background-color: darken(@infoBackground, 5%);
  211. }
  212. }