Libraryless. Click here for Pure Java version (2628L/17K).
1 | sS hcss_responstableForForms() {
|
2 | ret hcss([[ |
3 | .responstableForForms {
|
4 | margin: 1em 0; |
5 | /*width: 100%;*/ |
6 | overflow: hidden; |
7 | background: #FFF; |
8 | color: #024457; |
9 | border-radius: 10px; |
10 | border: 1px solid #167F92; |
11 | } |
12 | |
13 | .responstableForForms tr {
|
14 | border: 1px solid #D9E4E6; |
15 | } |
16 | .responstableForForms tr:nth-child(odd) {
|
17 | background-color: #EAF3F3; |
18 | } |
19 | .responstableForForms th {
|
20 | display: none; |
21 | border: 1px solid #FFF; |
22 | background-color: #167F92; |
23 | color: #FFF; |
24 | padding: 1em; |
25 | } |
26 | .responstableForForms th:first-child {
|
27 | display: table-cell; |
28 | text-align: center; |
29 | } |
30 | .responstableForForms th:nth-child(2) {
|
31 | display: table-cell; |
32 | } |
33 | .responstableForForms th:nth-child(2) span {
|
34 | display: none; |
35 | } |
36 | .responstableForForms th:nth-child(2):after {
|
37 | content: attr(data-th); |
38 | } |
39 | @media (min-width: 480px) {
|
40 | .responstableForForms th:nth-child(2) span {
|
41 | display: block; |
42 | } |
43 | .responstableForForms th:nth-child(2):after {
|
44 | display: none; |
45 | } |
46 | } |
47 | .responstableForForms td {
|
48 | display: block; |
49 | word-wrap: break-word; |
50 | /*max-width: 7em;*/ |
51 | } |
52 | .responstableForForms td:first-child {
|
53 | display: table-cell; |
54 | text-align: center; |
55 | border-right: 1px solid #D9E4E6; |
56 | } |
57 | @media (min-width: 480px) {
|
58 | .responstableForForms td {
|
59 | border: 1px solid #D9E4E6; |
60 | } |
61 | } |
62 | .responstableForForms th, .responstableForForms td {
|
63 | text-align: left; |
64 | margin: .5em 1em; |
65 | } |
66 | @media (min-width: 480px) {
|
67 | .responstableForForms th, .responstableForForms td {
|
68 | display: table-cell; |
69 | padding: 1em; |
70 | } |
71 | } |
72 | ]]); |
73 | } |
Began life as a copy of #1028335
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: | #1029636 |
| Snippet name: | hcss_responstableForForms [nice table design with flexible widths, for forms] |
| Eternal ID of this version: | #1029636/2 |
| Text MD5: | 4b443205c4ddd9f2380267e502aa0ad3 |
| Transpilation MD5: | ae64132d650817720c844a880ca68793 |
| Author: | stefan |
| Category: | javax / css |
| Type: | JavaX fragment (include) |
| Public (visible to everyone): | Yes |
| Archived (hidden from active list): | No |
| Created/modified: | 2020-09-01 14:40:56 |
| Source code size: | 1836 bytes / 73 lines |
| Pitched / IR pitched: | No / No |
| Views / Downloads: | 175 / 263 |
| Version history: | 1 change(s) |
| Referenced in: | [show references] |