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

75
LINES

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

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

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

// we used to have overflow: hidden, but visible should work
// too and solve the cutting-off hPopDownButton problem
sS hcss_responstable() {
  ret hcss([[
    .responstable {
      margin: 1em 0;
      width: 100%;
      overflow: visible;
      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  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: 160 / 240
Version history: 3 change(s)
Referenced in: [show references]