tables.less 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. //
  2. // Tables.less
  3. // Tables for, you guessed it, tabular data
  4. // ----------------------------------------
  5. // BASE TABLES
  6. // -----------------
  7. table {
  8. max-width: 100%;
  9. border-collapse: collapse;
  10. border-spacing: 0;
  11. background-color: @tableBackground;
  12. }
  13. // BASELINE STYLES
  14. // ---------------
  15. .table {
  16. width: 100%;
  17. margin-bottom: @baseLineHeight;
  18. // Cells
  19. th,
  20. td {
  21. padding: 8px;
  22. line-height: @baseLineHeight;
  23. text-align: left;
  24. vertical-align: top;
  25. border-top: 1px solid @tableBorder;
  26. }
  27. th {
  28. font-weight: bold;
  29. }
  30. // Bottom align for column headings
  31. thead th {
  32. vertical-align: bottom;
  33. }
  34. // Remove top border from thead by default
  35. colgroup + thead tr:first-child th,
  36. colgroup + thead tr:first-child td,
  37. thead:first-child tr:first-child th,
  38. thead:first-child tr:first-child td {
  39. border-top: 0;
  40. }
  41. // Account for multiple tbody instances
  42. tbody + tbody {
  43. border-top: 2px solid @tableBorder;
  44. }
  45. }
  46. // CONDENSED TABLE W/ HALF PADDING
  47. // -------------------------------
  48. .table-condensed {
  49. th,
  50. td {
  51. padding: 4px 5px;
  52. }
  53. }
  54. // BORDERED VERSION
  55. // ----------------
  56. .table-bordered {
  57. border: 1px solid @tableBorder;
  58. border-left: 0;
  59. border-collapse: separate; // Done so we can round those corners!
  60. *border-collapse: collapsed; // IE7 can't round corners anyway
  61. .border-radius(4px);
  62. th,
  63. td {
  64. border-left: 1px solid @tableBorder;
  65. }
  66. // Prevent a double border
  67. thead:first-child tr:first-child th,
  68. tbody:first-child tr:first-child th,
  69. tbody:first-child tr:first-child td {
  70. border-top: 0;
  71. }
  72. // For first th or td in the first row in the first thead or tbody
  73. thead:first-child tr:first-child th:first-child,
  74. tbody:first-child tr:first-child td:first-child {
  75. .border-radius(4px 0 0 0);
  76. }
  77. thead:first-child tr:first-child th:last-child,
  78. tbody:first-child tr:first-child td:last-child {
  79. .border-radius(0 4px 0 0);
  80. }
  81. // For first th or td in the first row in the first thead or tbody
  82. thead:last-child tr:last-child th:first-child,
  83. tbody:last-child tr:last-child td:first-child {
  84. .border-radius(0 0 0 4px);
  85. }
  86. thead:last-child tr:last-child th:last-child,
  87. tbody:last-child tr:last-child td:last-child {
  88. .border-radius(0 0 4px 0);
  89. }
  90. }
  91. // ZEBRA-STRIPING
  92. // --------------
  93. // Default zebra-stripe styles (alternating gray and transparent backgrounds)
  94. .table-striped {
  95. tbody {
  96. tr:nth-child(odd) td,
  97. tr:nth-child(odd) th {
  98. background-color: @tableBackgroundAccent;
  99. }
  100. }
  101. }
  102. // HOVER EFFECT
  103. // ------------
  104. // Placed here since it has to come after the potential zebra striping
  105. .table {
  106. tbody tr:hover td,
  107. tbody tr:hover th {
  108. background-color: @tableBackgroundHover;
  109. }
  110. }
  111. // TABLE CELL SIZING
  112. // -----------------
  113. // Change the columns
  114. table {
  115. .span1 { .tableColumns(1); }
  116. .span2 { .tableColumns(2); }
  117. .span3 { .tableColumns(3); }
  118. .span4 { .tableColumns(4); }
  119. .span5 { .tableColumns(5); }
  120. .span6 { .tableColumns(6); }
  121. .span7 { .tableColumns(7); }
  122. .span8 { .tableColumns(8); }
  123. .span9 { .tableColumns(9); }
  124. .span10 { .tableColumns(10); }
  125. .span11 { .tableColumns(11); }
  126. .span12 { .tableColumns(12); }
  127. .span13 { .tableColumns(13); }
  128. .span14 { .tableColumns(14); }
  129. .span15 { .tableColumns(15); }
  130. .span16 { .tableColumns(16); }
  131. .span17 { .tableColumns(17); }
  132. .span18 { .tableColumns(18); }
  133. .span19 { .tableColumns(19); }
  134. .span20 { .tableColumns(20); }
  135. .span21 { .tableColumns(21); }
  136. .span22 { .tableColumns(22); }
  137. .span23 { .tableColumns(23); }
  138. .span24 { .tableColumns(24); }
  139. }