Layout von Websiten mit Bootstrap und Foundation
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

_tables.scss 3.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. //
  2. // Basic Bootstrap table
  3. //
  4. .table {
  5. width: 100%;
  6. margin-bottom: $spacer;
  7. color: $table-color;
  8. background-color: $table-bg; // Reset for nesting within parents with `background-color`.
  9. th,
  10. td {
  11. padding: $table-cell-padding;
  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. }
  23. //
  24. // Condensed table w/ half padding
  25. //
  26. .table-sm {
  27. th,
  28. td {
  29. padding: $table-cell-padding-sm;
  30. }
  31. }
  32. // Border versions
  33. //
  34. // Add or remove borders all around the table and between all the columns.
  35. .table-bordered {
  36. border: $table-border-width solid $table-border-color;
  37. th,
  38. td {
  39. border: $table-border-width solid $table-border-color;
  40. }
  41. thead {
  42. th,
  43. td {
  44. border-bottom-width: 2 * $table-border-width;
  45. }
  46. }
  47. }
  48. .table-borderless {
  49. th,
  50. td,
  51. thead th,
  52. tbody + tbody {
  53. border: 0;
  54. }
  55. }
  56. // Zebra-striping
  57. //
  58. // Default zebra-stripe styles (alternating gray and transparent backgrounds)
  59. .table-striped {
  60. tbody tr:nth-of-type(#{$table-striped-order}) {
  61. background-color: $table-accent-bg;
  62. }
  63. }
  64. // Hover effect
  65. //
  66. // Placed here since it has to come after the potential zebra striping
  67. .table-hover {
  68. tbody tr {
  69. @include hover() {
  70. color: $table-hover-color;
  71. background-color: $table-hover-bg;
  72. }
  73. }
  74. }
  75. // Table backgrounds
  76. //
  77. // Exact selectors below required to override `.table-striped` and prevent
  78. // inheritance to nested tables.
  79. @each $color, $value in $theme-colors {
  80. @include table-row-variant($color, theme-color-level($color, $table-bg-level), theme-color-level($color, $table-border-level));
  81. }
  82. @include table-row-variant(active, $table-active-bg);
  83. // Dark styles
  84. //
  85. // Same table markup, but inverted color scheme: dark background and light text.
  86. // stylelint-disable-next-line no-duplicate-selectors
  87. .table {
  88. .thead-dark {
  89. th {
  90. color: $table-dark-color;
  91. background-color: $table-dark-bg;
  92. border-color: $table-dark-border-color;
  93. }
  94. }
  95. .thead-light {
  96. th {
  97. color: $table-head-color;
  98. background-color: $table-head-bg;
  99. border-color: $table-border-color;
  100. }
  101. }
  102. }
  103. .table-dark {
  104. color: $table-dark-color;
  105. background-color: $table-dark-bg;
  106. th,
  107. td,
  108. thead th {
  109. border-color: $table-dark-border-color;
  110. }
  111. &.table-bordered {
  112. border: 0;
  113. }
  114. &.table-striped {
  115. tbody tr:nth-of-type(#{$table-striped-order}) {
  116. background-color: $table-dark-accent-bg;
  117. }
  118. }
  119. &.table-hover {
  120. tbody tr {
  121. @include hover() {
  122. color: $table-dark-hover-color;
  123. background-color: $table-dark-hover-bg;
  124. }
  125. }
  126. }
  127. }
  128. // Responsive tables
  129. //
  130. // Generate series of `.table-responsive-*` classes for configuring the screen
  131. // size of where your table will overflow.
  132. .table-responsive {
  133. @each $breakpoint in map-keys($grid-breakpoints) {
  134. $next: breakpoint-next($breakpoint, $grid-breakpoints);
  135. $infix: breakpoint-infix($next, $grid-breakpoints);
  136. &#{$infix} {
  137. @include media-breakpoint-down($breakpoint) {
  138. display: block;
  139. width: 100%;
  140. overflow-x: auto;
  141. -webkit-overflow-scrolling: touch;
  142. // Prevent double border on horizontal scroll due to use of `display: block;`
  143. > .table-bordered {
  144. border: 0;
  145. }
  146. }
  147. }
  148. }
  149. }