oppi.li
1/* based on Fomantic UI segment module, with just the parts extracted that we use. If you find any
2 unused rules here after refactoring, please remove them. */
3
4.ui.table {
5 width: 100%;
6 margin: 1em 0;
7 border: 1px solid var(--color-secondary);
8 border-radius: 0.28571429rem;
9 vertical-align: middle;
10 border-collapse: separate;
11 border-spacing: 0;
12 color: var(--color-text);
13 background: var(--color-box-body);
14 border-color: var(--color-secondary);
15 text-align: start;
16}
17
18.ui.table:first-child {
19 margin-top: 0;
20}
21.ui.table:last-child {
22 margin-bottom: 0;
23}
24.ui.table > thead,
25.ui.table > tbody {
26 text-align: inherit;
27 vertical-align: inherit;
28}
29
30.ui.table > thead > tr > th {
31 background: var(--color-box-header);
32 text-align: inherit;
33 color: var(--color-text);
34 padding: 6px 5px;
35 vertical-align: inherit;
36 font-weight: var(--font-weight-normal);
37 border-bottom: 1px solid var(--color-secondary);
38 border-left: none;
39}
40.ui.table > thead > tr > th:first-child {
41 border-left: none;
42}
43.ui.table > thead > tr:first-child > th:first-child {
44 border-radius: 0.28571429rem 0 0;
45}
46.ui.table > thead > tr:first-child > th:last-child {
47 border-radius: 0 0.28571429rem 0 0;
48}
49.ui.table > thead > tr:first-child > th:only-child {
50 border-radius: 0.28571429rem 0.28571429rem 0 0;
51}
52
53.ui.table > tfoot > tr > th,
54.ui.table > tfoot > tr > td {
55 border-top: 1px solid var(--color-secondary);
56 background: var(--color-box-body);
57 text-align: inherit;
58 color: var(--color-text);
59 padding: 0.78571429em;
60 vertical-align: inherit;
61 font-weight: var(--font-weight-normal);
62}
63.ui.table > tfoot > tr > th:first-child,
64.ui.table > tfoot > tr > td:first-child {
65 border-left: none;
66}
67.ui.table > tfoot > tr:first-child > th:first-child,
68.ui.table > tfoot > tr:first-child > td:first-child {
69 border-radius: 0 0 0 0.28571429rem;
70}
71.ui.table > tfoot > tr:first-child > th:last-child,
72.ui.table > tfoot > tr:first-child > td:last-child {
73 border-radius: 0 0 0.28571429rem;
74}
75.ui.table > tfoot > tr:first-child > th:only-child,
76.ui.table > tfoot > tr:first-child > td:only-child {
77 border-radius: 0 0 0.28571429rem 0.28571429rem;
78}
79
80.ui.table > tr > td,
81.ui.table > tbody > tr > td {
82 border-top: 1px solid var(--color-secondary-alpha-50);
83 padding: 6px 5px;
84 text-align: inherit;
85}
86.ui.table > tr:first-child > td,
87.ui.table > tbody > tr:first-child > td {
88 border-top: none;
89}
90
91.ui.table.segment {
92 padding: 0;
93}
94.ui.table.segment::after {
95 display: none;
96}
97
98@media only screen and (max-width: 767.98px) {
99 .ui.table:not(.unstackable) {
100 width: 100%;
101 padding: 0;
102 }
103 .ui.table:not(.unstackable) > thead,
104 .ui.table:not(.unstackable) > thead > tr,
105 .ui.table:not(.unstackable) > tfoot,
106 .ui.table:not(.unstackable) > tfoot > tr,
107 .ui.table:not(.unstackable) > tbody,
108 .ui.table:not(.unstackable) > tr,
109 .ui.table:not(.unstackable) > tbody > tr,
110 .ui.table:not(.unstackable) > tr > th,
111 .ui.table:not(.unstackable) > thead > tr > th,
112 .ui.table:not(.unstackable) > tbody > tr > th,
113 .ui.table:not(.unstackable) > tfoot > tr > th,
114 .ui.table:not(.unstackable) > tr > td,
115 .ui.table:not(.unstackable) > tbody > tr > td,
116 .ui.table:not(.unstackable) > tfoot > tr > td {
117 display: block !important;
118 width: auto !important;
119 }
120 .ui.table:not(.unstackable) > thead {
121 display: block;
122 }
123 .ui.table:not(.unstackable) > tfoot {
124 display: block;
125 }
126 .ui.ui.ui.ui.table:not(.unstackable) > tr,
127 .ui.ui.ui.ui.table:not(.unstackable) > thead > tr,
128 .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr,
129 .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr {
130 padding-top: 1em;
131 padding-bottom: 1em;
132 }
133 .ui.ui.ui.ui.table:not(.unstackable) > tr > th,
134 .ui.ui.ui.ui.table:not(.unstackable) > thead > tr > th,
135 .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > th,
136 .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr > th,
137 .ui.ui.ui.ui.table:not(.unstackable) > tr > td,
138 .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > td,
139 .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr > td {
140 background: none;
141 border: none;
142 padding: 0.25em 0.75em;
143 }
144 .ui.table:not(.unstackable) > tr > th:first-child,
145 .ui.table:not(.unstackable) > thead > tr > th:first-child,
146 .ui.table:not(.unstackable) > tbody > tr > th:first-child,
147 .ui.table:not(.unstackable) > tfoot > tr > th:first-child,
148 .ui.table:not(.unstackable) > tr > td:first-child,
149 .ui.table:not(.unstackable) > tbody > tr > td:first-child,
150 .ui.table:not(.unstackable) > tfoot > tr > td:first-child {
151 font-weight: var(--font-weight-normal);
152 }
153}
154
155.ui.table[class*="left aligned"],
156.ui.table [class*="left aligned"] {
157 text-align: left;
158}
159
160.ui.table[class*="center aligned"],
161.ui.table [class*="center aligned"] {
162 text-align: center;
163}
164
165.ui.table[class*="right aligned"],
166.ui.table [class*="right aligned"] {
167 text-align: right;
168}
169
170.ui.table[class*="top aligned"],
171.ui.table [class*="top aligned"] {
172 vertical-align: top;
173}
174
175.ui.table[class*="middle aligned"],
176.ui.table [class*="middle aligned"] {
177 vertical-align: middle;
178}
179
180.ui.table th.collapsing,
181.ui.table td.collapsing {
182 width: 1px;
183 white-space: nowrap;
184}
185
186.ui.fixed.table {
187 table-layout: fixed;
188}
189.ui.fixed.table th,
190.ui.fixed.table td {
191 overflow: hidden;
192 text-overflow: ellipsis;
193}
194
195.ui.attached.table {
196 top: 0;
197 bottom: 0;
198 border-radius: 0;
199 margin: 0 -1px;
200 width: calc(100% + 2px);
201 max-width: calc(100% + 2px);
202 border: 1px solid var(--color-secondary);
203}
204.ui.attached + .ui.attached.table:not(.top) {
205 border-top: none;
206}
207
208.ui[class*="bottom attached"].table {
209 bottom: 0;
210 margin-top: 0;
211 top: 0;
212 margin-bottom: 1em;
213 border-radius: 0 0 0.28571429rem 0.28571429rem;
214}
215.ui[class*="bottom attached"].table:last-child {
216 margin-bottom: 0;
217}
218
219.ui.striped.table > tr:nth-child(2n),
220.ui.striped.table > tbody > tr:nth-child(2n) {
221 background: var(--color-light);
222}
223
224.ui.table[class*="single line"],
225.ui.table [class*="single line"] {
226 white-space: nowrap;
227}
228
229/* Column Width */
230.ui.table th.one.wide,
231.ui.table td.one.wide {
232 width: 6.25%;
233}
234.ui.table th.two.wide,
235.ui.table td.two.wide {
236 width: 12.5%;
237}
238.ui.table th.three.wide,
239.ui.table td.three.wide {
240 width: 18.75%;
241}
242.ui.table th.four.wide,
243.ui.table td.four.wide {
244 width: 25%;
245}
246.ui.table th.five.wide,
247.ui.table td.five.wide {
248 width: 31.25%;
249}
250.ui.table th.six.wide,
251.ui.table td.six.wide {
252 width: 37.5%;
253}
254.ui.table th.seven.wide,
255.ui.table td.seven.wide {
256 width: 43.75%;
257}
258.ui.table th.eight.wide,
259.ui.table td.eight.wide {
260 width: 50%;
261}
262.ui.table th.nine.wide,
263.ui.table td.nine.wide {
264 width: 56.25%;
265}
266.ui.table th.ten.wide,
267.ui.table td.ten.wide {
268 width: 62.5%;
269}
270.ui.table th.eleven.wide,
271.ui.table td.eleven.wide {
272 width: 68.75%;
273}
274.ui.table th.twelve.wide,
275.ui.table td.twelve.wide {
276 width: 75%;
277}
278.ui.table th.thirteen.wide,
279.ui.table td.thirteen.wide {
280 width: 81.25%;
281}
282.ui.table th.fourteen.wide,
283.ui.table td.fourteen.wide {
284 width: 87.5%;
285}
286.ui.table th.fifteen.wide,
287.ui.table td.fifteen.wide {
288 width: 93.75%;
289}
290.ui.table th.sixteen.wide,
291.ui.table td.sixteen.wide {
292 width: 100%;
293}
294
295.ui.basic.table {
296 background: transparent;
297 border: 1px solid var(--color-secondary);
298}
299.ui.basic.table > thead > tr > th,
300.ui.basic.table > tbody > tr > th,
301.ui.basic.table > tfoot > tr > th,
302.ui.basic.table > tr > th {
303 background: transparent;
304 border-left: none;
305}
306.ui.basic.table > tbody > tr {
307 border-bottom: 1px solid var(--color-secondary);
308}
309.ui.basic.table > tbody > tr > td,
310.ui.basic.table > tfoot > tr > td,
311.ui.basic.table > tr > td {
312 background: transparent;
313}
314.ui.basic.striped.table > tbody > tr:nth-child(2n) {
315 background: var(--color-light);
316}
317
318.ui[class*="very basic"].table {
319 border: none;
320}
321.ui[class*="very basic"].table:not(.striped) > tr > th:first-child,
322.ui[class*="very basic"].table:not(.striped) > thead > tr > th:first-child,
323.ui[class*="very basic"].table:not(.striped) > tbody > tr > th:first-child,
324.ui[class*="very basic"].table:not(.striped) > tfoot > tr > th:first-child,
325.ui[class*="very basic"].table:not(.striped) > tr > td:first-child,
326.ui[class*="very basic"].table:not(.striped) > tbody > tr > td:first-child,
327.ui[class*="very basic"].table:not(.striped) > tfoot > tr > td:first-child {
328 padding-left: 0;
329}
330.ui[class*="very basic"].table:not(.striped) > tr > th:last-child,
331.ui[class*="very basic"].table:not(.striped) > thead > tr > th:last-child,
332.ui[class*="very basic"].table:not(.striped) > tbody > tr > th:last-child,
333.ui[class*="very basic"].table:not(.striped) > tfoot > tr > th:last-child,
334.ui[class*="very basic"].table:not(.striped) > tr > td:last-child,
335.ui[class*="very basic"].table:not(.striped) > tbody > tr > td:last-child,
336.ui[class*="very basic"].table:not(.striped) > tfoot > tr > td:last-child {
337 padding-right: 0;
338}
339.ui[class*="very basic"].table:not(.striped) > thead > tr:first-child > th {
340 padding-top: 0;
341}
342
343.ui.celled.table > tr > th,
344.ui.celled.table > thead > tr > th,
345.ui.celled.table > tbody > tr > th,
346.ui.celled.table > tfoot > tr > th,
347.ui.celled.table > tr > td,
348.ui.celled.table > tbody > tr > td,
349.ui.celled.table > tfoot > tr > td {
350 border-left: 1px solid var(--color-secondary-alpha-50);
351}
352.ui.celled.table > tr > th:first-child,
353.ui.celled.table > thead > tr > th:first-child,
354.ui.celled.table > tbody > tr > th:first-child,
355.ui.celled.table > tfoot > tr > th:first-child,
356.ui.celled.table > tr > td:first-child,
357.ui.celled.table > tbody > tr > td:first-child,
358.ui.celled.table > tfoot > tr > td:first-child {
359 border-left: none;
360}
361
362.ui.compact.table > tr > th,
363.ui.compact.table > thead > tr > th,
364.ui.compact.table > tbody > tr > th,
365.ui.compact.table > tfoot > tr > th {
366 padding-left: 0.7em;
367 padding-right: 0.7em;
368}
369.ui.compact.table > tr > td,
370.ui.compact.table > tbody > tr > td,
371.ui.compact.table > tfoot > tr > td {
372 padding: 0.5em 0.7em;
373}
374
375/* use more horizontal padding on first and last items for visuals */
376.ui.table > thead > tr > th:first-of-type,
377.ui.table > tbody > tr > td:first-of-type,
378.ui.table > tr > td:first-of-type {
379 padding-left: 10px;
380}
381.ui.table > thead > tr > th:last-of-type,
382.ui.table > tbody > tr > td:last-of-type,
383.ui.table > tr > td:last-of-type {
384 padding-right: 10px;
385}