tables.stack.css 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. /*
  2. Styles for the table stack mode
  3. */
  4. /* Table rows have a gray bottom stroke by default */
  5. .tablesaw-stack tbody tr {
  6. border-bottom: 1px solid #dfdfdf;
  7. }
  8. .tablesaw-stack td .tablesaw-cell-label,
  9. .tablesaw-stack th .tablesaw-cell-label {
  10. display: none;
  11. }
  12. /* Mobile first styles: Begin with the stacked presentation at narrow widths */
  13. @media only all {
  14. /* Show the table cells as a block level element */
  15. .tablesaw-stack td,
  16. .tablesaw-stack th {
  17. text-align: left;
  18. display: block;
  19. }
  20. .tablesaw-stack tr {
  21. clear: both;
  22. display: table-row;
  23. }
  24. /* Make the label elements a percentage width */
  25. .tablesaw-stack td .tablesaw-cell-label,
  26. .tablesaw-stack th .tablesaw-cell-label {
  27. display: block;
  28. padding: 0 .6em 0 0;
  29. width: 30%;
  30. display: inline-block;
  31. }
  32. /* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */
  33. .tablesaw-stack th .tablesaw-cell-label-top,
  34. .tablesaw-stack td .tablesaw-cell-label-top {
  35. display: block;
  36. padding: .4em 0;
  37. margin: .4em 0;
  38. }
  39. .tablesaw-cell-label {
  40. display: block;
  41. }
  42. /* Avoid double strokes when stacked */
  43. .tablesaw-stack tbody th.group {
  44. margin-top:-1px;
  45. }
  46. /* Avoid double strokes when stacked */
  47. .tablesaw-stack th.group b.tablesaw-cell-label {
  48. display: none !important;
  49. }
  50. }