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

73
LINES

< > BotCompany Repo | #1028335 - hcss_responstable [nice table design]

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

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

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

download  show line numbers  debug dex   

Travelled to 6 computer(s): bhatertpkbcr, mqqgnosmbjvj, pyentgdyhuwx, pzhvpgtvlbxg, tvejysmllsmz, xrpafgyirdlv

No comments. add comment

Snippet ID: #1028335
Snippet name: hcss_responstable [nice table design]
Eternal ID of this version: #1028335/3
Text MD5: e8904412734cbcd758e23510c81b5d53
Transpilation MD5: f7f6342e11554ffe8125c3dd40a66f02
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:33:09
Source code size: 1684 bytes / 73 lines
Pitched / IR pitched: No / No
Views / Downloads: 36 / 78
Version history: 2 change(s)
Referenced in: [show references]

Formerly at http://tinybrain.de/1028335 & http://1028335.tinybrain.de