_tables.scss 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. //
  2. // Basic Bootstrap table
  3. //
  4. .table {
  5. width: 100%;
  6. max-width: 100%;
  7. margin-bottom: $spacer;
  8. th,
  9. td {
  10. padding: $table-cell-padding;
  11. line-height: $line-height;
  12. vertical-align: top;
  13. border-top: $table-border-width solid $table-border-color;
  14. }
  15. thead th {
  16. vertical-align: bottom;
  17. border-bottom: (2 * $table-border-width) solid $table-border-color;
  18. }
  19. tbody + tbody {
  20. border-top: (2 * $table-border-width) solid $table-border-color;
  21. }
  22. .table {
  23. background-color: $body-bg;
  24. }
  25. }
  26. //
  27. // Condensed table w/ half padding
  28. //
  29. .table-sm {
  30. th,
  31. td {
  32. padding: $table-sm-cell-padding;
  33. }
  34. }
  35. // Bordered version
  36. //
  37. // Add borders all around the table and between all the columns.
  38. .table-bordered {
  39. border: $table-border-width solid $table-border-color;
  40. th,
  41. td {
  42. border: $table-border-width solid $table-border-color;
  43. }
  44. thead {
  45. th,
  46. td {
  47. border-bottom-width: (2 * $table-border-width);
  48. }
  49. }
  50. }
  51. // Zebra-striping
  52. //
  53. // Default zebra-stripe styles (alternating gray and transparent backgrounds)
  54. .table-striped {
  55. tbody tr:nth-of-type(odd) {
  56. background-color: $table-bg-accent;
  57. }
  58. }
  59. // Hover effect
  60. //
  61. // Placed here since it has to come after the potential zebra striping
  62. .table-hover {
  63. tbody tr {
  64. @include hover {
  65. background-color: $table-bg-hover;
  66. }
  67. }
  68. }
  69. // Table backgrounds
  70. //
  71. // Exact selectors below required to override `.table-striped` and prevent
  72. // inheritance to nested tables.
  73. // Generate the contextual variants
  74. @include table-row-variant(active, $table-bg-active);
  75. @include table-row-variant(success, $state-success-bg);
  76. @include table-row-variant(info, $state-info-bg);
  77. @include table-row-variant(warning, $state-warning-bg);
  78. @include table-row-variant(danger, $state-danger-bg);
  79. // Responsive tables
  80. //
  81. // Wrap your tables in `.table-responsive` and we'll make them mobile friendly
  82. // by enabling horizontal scrolling. Only applies <768px. Everything above that
  83. // will display normally.
  84. .table-responsive {
  85. display: block;
  86. width: 100%;
  87. min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
  88. overflow-x: auto;
  89. // TODO: find out if we need this still.
  90. //
  91. // border: $table-border-width solid $table-border-color;
  92. // -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
  93. }
  94. .thead-inverse {
  95. th {
  96. color: #fff;
  97. background-color: $gray-dark;
  98. }
  99. }
  100. .thead-default {
  101. th {
  102. color: $gray;
  103. background-color: $gray-lighter;
  104. }
  105. }
  106. .table-inverse {
  107. color: $gray-lighter;
  108. background-color: $gray-dark;
  109. &.table-bordered {
  110. border: 0;
  111. }
  112. th,
  113. td,
  114. thead th {
  115. border-color: $gray;
  116. }
  117. }
  118. .table-reflow {
  119. thead {
  120. float: left;
  121. }
  122. tbody {
  123. display: block;
  124. white-space: nowrap;
  125. }
  126. th,
  127. td {
  128. border-top: $table-border-width solid $table-border-color;
  129. border-left: $table-border-width solid $table-border-color;
  130. &:last-child {
  131. border-right: $table-border-width solid $table-border-color;
  132. }
  133. }
  134. thead,
  135. tbody,
  136. tfoot {
  137. &:last-child {
  138. tr:last-child {
  139. th,
  140. td {
  141. border-bottom: $table-border-width solid $table-border-color;
  142. }
  143. }
  144. }
  145. }
  146. tr {
  147. float: left;
  148. th,
  149. td {
  150. display: block !important;
  151. border: $table-border-width solid $table-border-color;
  152. }
  153. }
  154. }