You are here

tablesaw.stackonly.beta1.css in Responsive Tables Filter 7

/*! Tablesaw - v3.0.0-beta.1 - 2016-09-19
* https://github.com/filamentgroup/tablesaw
* Copyright (c) 2016 Filament Group; Licensed MIT */

table.tablesaw {
  empty-cells: show;
  max-width: 100%;
  width: 100%;
}

.tablesaw {
  border-collapse: collapse;
  width: 100%;
}

/* Structure */

.tablesaw {
  border: 0;
  padding: 0;
}

.tablesaw th,
.tablesaw td {
  box-sizing: border-box;
  padding: .5em .7em;
}

.tablesaw thead tr:first-child th {
  padding-top: .9em;
  padding-bottom: .7em;
}

/* Table rows have a gray bottom stroke by default */

.tablesaw-stack tbody tr {
  border-bottom: 1px solid #dfdfdf;
}

.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 */

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

  .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: block;
    padding: 0 .6em 0 0;
    width: 30%;
    display: inline-block;
  }

  /* 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) {
  .tablesaw-stack thead td,
  .tablesaw-stack thead th {
    display: none;
  }

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

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

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

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