You are here

tablesaw.stackonly-responsive.css in Responsive Tables Filter 7

/*! Tablesaw - v3.1.2 - 2019-03-19
* https://github.com/filamentgroup/tablesaw
* Copyright (c) 2019 Filament Group; Licensed MIT */

.tablesaw {
  width: 100%;
  max-width: 100%;
  empty-cells: show;
  border-collapse: collapse;
  border: 0;
  padding: 0;
}

.tablesaw * {
  box-sizing: border-box;
}

.tablesaw-stack td .tablesaw-cell-label,
.tablesaw-stack th .tablesaw-cell-label {
  display: none;
}

/* Mobile first styles: Begin with the stacked presentation at narrow widths */

/* Support note IE9+: @media only all */

@media only all {
  /* Show the table cells as a block level element */

  .tablesaw-stack {
    clear: both;
  }

  .tablesaw-stack td,
  .tablesaw-stack th {
    text-align: left;
    display: block;
  }

  .tablesaw-stack tr {
    clear: both;
    display: table-row;
  }

  /* Make the label elements a percentage width */

  .tablesaw-stack td .tablesaw-cell-label,
  .tablesaw-stack th .tablesaw-cell-label {
    display: inline-block;
    padding: 0 .6em 0 0;
    width: 30%;
  }

  /* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */

  .tablesaw-stack th .tablesaw-cell-label-top,
  .tablesaw-stack td .tablesaw-cell-label-top {
    display: block;
    padding: .4em 0;
    margin: .4em 0;
  }

  .tablesaw-cell-label {
    display: block;
  }

  /* Avoid double strokes when stacked */

  .tablesaw-stack tbody th.group {
    margin-top: -1px;
  }

  /* Avoid double strokes when stacked */

  .tablesaw-stack th.group b.tablesaw-cell-label {
    display: none !important;
  }
}

@media (max-width: 39.9375em) {
  /* Table rows have a gray bottom stroke by default */

  .tablesaw-stack tbody tr {
    display: block;
    width: 100%;
    border-bottom: 1px solid #dfdfdf;
  }

  .tablesaw-stack thead td,
  .tablesaw-stack thead th {
    display: none;
  }

  .tablesaw-stack tbody td,
  .tablesaw-stack tbody th {
    display: block;
    float: left;
    clear: left;
    width: 100%;
  }

  .tablesaw-cell-label {
    vertical-align: top;
  }

  .tablesaw-cell-content {
    display: inline-block;
    max-width: 67%;
  }

  .tablesaw-stack .tablesaw-stack-block .tablesaw-cell-label,
  .tablesaw-stack .tablesaw-stack-block .tablesaw-cell-content {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

  .tablesaw-stack td:empty,
  .tablesaw-stack th:empty {
    display: none;
  }
}

/* Media query to show as a standard table at 560px (35em x 16px) or wider */

@media (min-width: 40em) {
  .tablesaw-stack tr {
    display: table-row;
  }

  /* Show the table header rows */

  .tablesaw-stack td,
  .tablesaw-stack th,
  .tablesaw-stack thead td,
  .tablesaw-stack thead th {
    display: table-cell;
    margin: 0;
  }

  /* Hide the labels in each cell */

  .tablesaw-stack td .tablesaw-cell-label,
  .tablesaw-stack th .tablesaw-cell-label {
    display: none !important;
  }
}

File

tablesaw/css/tablesaw.stackonly-responsive.css
View source
  1. /*! Tablesaw - v3.1.2 - 2019-03-19
  2. * https://github.com/filamentgroup/tablesaw
  3. * Copyright (c) 2019 Filament Group; Licensed MIT */
  4. .tablesaw {
  5. width: 100%;
  6. max-width: 100%;
  7. empty-cells: show;
  8. border-collapse: collapse;
  9. border: 0;
  10. padding: 0;
  11. }
  12. .tablesaw * {
  13. box-sizing: border-box;
  14. }
  15. .tablesaw-stack td .tablesaw-cell-label,
  16. .tablesaw-stack th .tablesaw-cell-label {
  17. display: none;
  18. }
  19. /* Mobile first styles: Begin with the stacked presentation at narrow widths */
  20. /* Support note IE9+: @media only all */
  21. @media only all {
  22. /* Show the table cells as a block level element */
  23. .tablesaw-stack {
  24. clear: both;
  25. }
  26. .tablesaw-stack td,
  27. .tablesaw-stack th {
  28. text-align: left;
  29. display: block;
  30. }
  31. .tablesaw-stack tr {
  32. clear: both;
  33. display: table-row;
  34. }
  35. /* Make the label elements a percentage width */
  36. .tablesaw-stack td .tablesaw-cell-label,
  37. .tablesaw-stack th .tablesaw-cell-label {
  38. display: inline-block;
  39. padding: 0 .6em 0 0;
  40. width: 30%;
  41. }
  42. /* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */
  43. .tablesaw-stack th .tablesaw-cell-label-top,
  44. .tablesaw-stack td .tablesaw-cell-label-top {
  45. display: block;
  46. padding: .4em 0;
  47. margin: .4em 0;
  48. }
  49. .tablesaw-cell-label {
  50. display: block;
  51. }
  52. /* Avoid double strokes when stacked */
  53. .tablesaw-stack tbody th.group {
  54. margin-top: -1px;
  55. }
  56. /* Avoid double strokes when stacked */
  57. .tablesaw-stack th.group b.tablesaw-cell-label {
  58. display: none !important;
  59. }
  60. }
  61. @media (max-width: 39.9375em) {
  62. /* Table rows have a gray bottom stroke by default */
  63. .tablesaw-stack tbody tr {
  64. display: block;
  65. width: 100%;
  66. border-bottom: 1px solid #dfdfdf;
  67. }
  68. .tablesaw-stack thead td,
  69. .tablesaw-stack thead th {
  70. display: none;
  71. }
  72. .tablesaw-stack tbody td,
  73. .tablesaw-stack tbody th {
  74. display: block;
  75. float: left;
  76. clear: left;
  77. width: 100%;
  78. }
  79. .tablesaw-cell-label {
  80. vertical-align: top;
  81. }
  82. .tablesaw-cell-content {
  83. display: inline-block;
  84. max-width: 67%;
  85. }
  86. .tablesaw-stack .tablesaw-stack-block .tablesaw-cell-label,
  87. .tablesaw-stack .tablesaw-stack-block .tablesaw-cell-content {
  88. display: block;
  89. width: 100%;
  90. max-width: 100%;
  91. padding: 0;
  92. }
  93. .tablesaw-stack td:empty,
  94. .tablesaw-stack th:empty {
  95. display: none;
  96. }
  97. }
  98. /* Media query to show as a standard table at 560px (35em x 16px) or wider */
  99. @media (min-width: 40em) {
  100. .tablesaw-stack tr {
  101. display: table-row;
  102. }
  103. /* Show the table header rows */
  104. .tablesaw-stack td,
  105. .tablesaw-stack th,
  106. .tablesaw-stack thead td,
  107. .tablesaw-stack thead th {
  108. display: table-cell;
  109. margin: 0;
  110. }
  111. /* Hide the labels in each cell */
  112. .tablesaw-stack td .tablesaw-cell-label,
  113. .tablesaw-stack th .tablesaw-cell-label {
  114. display: none !important;
  115. }
  116. }