Not logged in.  Login/Logout/Register | List snippets | | Create snippet | Upload image | Upload data

73
LINES

< > BotCompany Repo | #1029636 // hcss_responstableForForms [nice table design with flexible widths, for forms]

JavaX fragment (include) [tags: use-pretranspiled]

Libraryless. Click here for Pure Java version (2628L/17K).

sS hcss_responstableForForms() {
  ret hcss([[
    .responstableForForms {
      margin: 1em 0;
      /*width: 100%;*/
      overflow: hidden;
      background: #FFF;
      color: #024457;
      border-radius: 10px;
      border: 1px solid #167F92;
    }
    
    .responstableForForms tr {
      border: 1px solid #D9E4E6;
    }
    .responstableForForms tr:nth-child(odd) {
      background-color: #EAF3F3;
    }
    .responstableForForms th {
      display: none;
      border: 1px solid #FFF;
      background-color: #167F92;
      color: #FFF;
      padding: 1em;
    }
    .responstableForForms th:first-child {
      display: table-cell;
      text-align: center;
    }
    .responstableForForms th:nth-child(2) {
      display: table-cell;
    }
    .responstableForForms th:nth-child(2) span {
      display: none;
    }
    .responstableForForms th:nth-child(2):after {
      content: attr(data-th);
    }
    @media (min-width: 480px) {
      .responstableForForms th:nth-child(2) span {
        display: block;
      }
      .responstableForForms th:nth-child(2):after {
        display: none;
      }
    }
    .responstableForForms td {
      display: block;
      word-wrap: break-word;
      /*max-width: 7em;*/
    }
    .responstableForForms td:first-child {
      display: table-cell;
      text-align: center;
      border-right: 1px solid #D9E4E6;
    }
    @media (min-width: 480px) {
      .responstableForForms td {
        border: 1px solid #D9E4E6;
      }
    }
    .responstableForForms th, .responstableForForms td {
      text-align: left;
      margin: .5em 1em;
    }
    @media (min-width: 480px) {
      .responstableForForms th, .responstableForForms td {
        display: table-cell;
        padding: 1em;
      }
    }
  ]]);
}

Author comment

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: 116 / 187
Version history: 1 change(s)
Referenced in: [show references]