Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

tables.less 2.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  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. }
  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. border-top: 1px solid #ddd;
  24. }
  25. th {
  26. font-weight: bold;
  27. vertical-align: bottom;
  28. }
  29. td {
  30. vertical-align: top;
  31. }
  32. // Remove top border from thead by default
  33. thead:first-child tr th,
  34. thead:first-child tr td {
  35. border-top: 0;
  36. }
  37. // Account for multiple tbody instances
  38. tbody + tbody {
  39. border-top: 2px solid #ddd;
  40. }
  41. }
  42. // CONDENSED TABLE W/ HALF PADDING
  43. // -------------------------------
  44. .table-condensed {
  45. th,
  46. td {
  47. padding: 4px 5px;
  48. }
  49. }
  50. // BORDERED VERSION
  51. // ----------------
  52. .table-bordered {
  53. border: 1px solid #ddd;
  54. border-collapse: separate; // Done so we can round those corners!
  55. *border-collapse: collapsed; // IE7 can't round corners anyway
  56. .border-radius(4px);
  57. th + th,
  58. td + td,
  59. th + td,
  60. td + th {
  61. border-left: 1px solid #ddd;
  62. }
  63. // Prevent a double border
  64. thead:first-child tr:first-child th,
  65. tbody:first-child tr:first-child th,
  66. tbody:first-child tr:first-child td {
  67. border-top: 0;
  68. }
  69. // For first th or td in the first row in the first thead or tbody
  70. thead:first-child tr:first-child th:first-child,
  71. tbody:first-child tr:first-child td:first-child {
  72. .border-radius(4px 0 0 0);
  73. }
  74. thead:first-child tr:first-child th:last-child,
  75. tbody:first-child tr:first-child td:last-child {
  76. .border-radius(0 4px 0 0);
  77. }
  78. // For first th or td in the first row in the first thead or tbody
  79. thead:last-child tr:last-child th:first-child,
  80. tbody:last-child tr:last-child td:first-child {
  81. .border-radius(0 0 0 4px);
  82. }
  83. thead:last-child tr:last-child th:last-child,
  84. tbody:last-child tr:last-child td:last-child {
  85. .border-radius(0 0 4px 0);
  86. }
  87. }
  88. // ZEBRA-STRIPING
  89. // --------------
  90. // Default zebra-stripe styles (alternating gray and transparent backgrounds)
  91. .table-striped {
  92. tbody {
  93. tr:nth-child(odd) td,
  94. tr:nth-child(odd) th {
  95. background-color: #f9f9f9;
  96. }
  97. }
  98. }
  99. // TABLE CELL SIZING
  100. // -----------------
  101. // Change the columns
  102. .tableColumns(@columnSpan: 1) {
  103. float: none;
  104. width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16;
  105. margin-left: 0;
  106. }
  107. table {
  108. .span1 { .tableColumns(1); }
  109. .span2 { .tableColumns(2); }
  110. .span3 { .tableColumns(3); }
  111. .span4 { .tableColumns(4); }
  112. .span5 { .tableColumns(5); }
  113. .span6 { .tableColumns(6); }
  114. .span7 { .tableColumns(7); }
  115. .span8 { .tableColumns(8); }
  116. .span9 { .tableColumns(9); }
  117. .span10 { .tableColumns(10); }
  118. .span11 { .tableColumns(11); }
  119. .span12 { .tableColumns(12); }
  120. }