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