Libraryless. Click here for Pure Java version (2894L/17K).
1 | // we used to have overflow: hidden, but visible should work |
2 | // too and solve the cutting-off hPopDownButton problem |
3 | sS hcss_responstable() {
|
4 | ret hcss([[ |
5 | .responstable {
|
6 | margin: 1em 0; |
7 | width: 100%; |
8 | overflow: visible; |
9 | background: #FFF; |
10 | color: #024457; |
11 | border-radius: 10px; |
12 | border: 1px solid #167F92; |
13 | } |
14 | |
15 | .responstable tr {
|
16 | border: 1px solid #D9E4E6; |
17 | } |
18 | .responstable tr:nth-child(odd) {
|
19 | background-color: #EAF3F3; |
20 | } |
21 | .responstable th {
|
22 | display: none; |
23 | border: 1px solid #FFF; |
24 | background-color: #167F92; |
25 | color: #FFF; |
26 | padding: 1em; |
27 | } |
28 | .responstable th:first-child {
|
29 | display: table-cell; |
30 | text-align: center; |
31 | } |
32 | .responstable th:nth-child(2) {
|
33 | display: table-cell; |
34 | } |
35 | .responstable th:nth-child(2) span {
|
36 | display: none; |
37 | } |
38 | .responstable th:nth-child(2):after {
|
39 | content: attr(data-th); |
40 | } |
41 | @media (min-width: 480px) {
|
42 | .responstable th:nth-child(2) span {
|
43 | display: block; |
44 | } |
45 | .responstable th:nth-child(2):after {
|
46 | display: none; |
47 | } |
48 | } |
49 | .responstable td {
|
50 | display: block; |
51 | word-wrap: break-word; |
52 | max-width: 7em; |
53 | } |
54 | .responstable td:first-child {
|
55 | display: table-cell; |
56 | text-align: center; |
57 | border-right: 1px solid #D9E4E6; |
58 | } |
59 | @media (min-width: 480px) {
|
60 | .responstable td {
|
61 | border: 1px solid #D9E4E6; |
62 | } |
63 | } |
64 | .responstable th, .responstable td {
|
65 | text-align: left; |
66 | margin: .5em 1em; |
67 | } |
68 | @media (min-width: 480px) {
|
69 | .responstable th, .responstable td {
|
70 | display: table-cell; |
71 | padding: 1em; |
72 | } |
73 | } |
74 | ]]); |
75 | } |
download show line numbers debug dex old transpilations
Travelled to 7 computer(s): bhatertpkbcr, mqqgnosmbjvj, pyentgdyhuwx, pzhvpgtvlbxg, tvejysmllsmz, vouqrxazstgt, xrpafgyirdlv
No comments. add comment
| Snippet ID: | #1028335 |
| Snippet name: | hcss_responstable [nice table design] |
| Eternal ID of this version: | #1028335/4 |
| Text MD5: | 96113872af538be8a02cfa5ab04304cb |
| Transpilation MD5: | fa1b415be26e251b345e7b5725e8be42 |
| Author: | stefan |
| Category: | javax / css |
| Type: | JavaX fragment (include) |
| Public (visible to everyone): | Yes |
| Archived (hidden from active list): | No |
| Created/modified: | 2021-04-03 15:03:43 |
| Source code size: | 1804 bytes / 75 lines |
| Pitched / IR pitched: | No / No |
| Views / Downloads: | 164 / 244 |
| Version history: | 3 change(s) |
| Referenced in: | [show references] |