User:Aardvark/TableTest.css

From Blank Chronicle
< User:Aardvark
Revision as of 20:05, 30 December 2020 by Aardvark (talk | contribs)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
table.layout{
  width: 85%;
  border-collapse: collapse;
}
table.display{
  margin: 1em auto;
}
table.display th,
table.display td{
  border: 1px solid #B3BFAA;
  padding: .5em 1em;
  text-align: left;
}

table.display th{ background: #D5E0CC; }
table.display td{ background: #fff; }


@media only screen and (max-width : 1000px){

    table.layout{
      width: 100%;
    }
    table.responsive-table thead{
      display: none; 
    }
  table.display th,
  table.display td{
    padding: .5em;
  }
  
  table.responsive-table tr:nth-child(1){
    display: none;
  }  
  table.responsive-table td:nth-child(1):before{
    content: '#';
  }
  table.responsive-table td:nth-child(2):before{
    content: 'Name';
  }
  table.responsive-table td:nth-child(1),
  table.responsive-table td:nth-child(2){
    padding-left: 25%;
  }
  table.responsive-table td:nth-child(1):before,
  table.responsive-table td:nth-child(2):before{
    position: absolute;
    left: .5em;
    font-weight: bold;
  }
  
    table.responsive-table tr,
    table.responsive-table td{
        display: block;
    }
    table.responsive-table tr{
        position: relative;
        margin-bottom: 1em;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
    }
    table.responsive-table td{
        border-top: none;
    }
    table.responsive-table td.organisationnumber{
        background: #D5E0CC;
        border-top: 1px solid #B3BFAA;
    }
    table.responsive-table td:nth-child(3){
        position: absolute;
        top: 0;
        right: 0;
        border: none;
        background: none;
        padding: 1px 0.5em 0px 0;
    }

    .filetable-4col, .tracktable-4col, .tracktable-vocal, .tracktable, .wikitable
    {
        width: 100%;
    }
}




.page-subcontainer .edition-target.fc-content > .tracktable, .page-subcontainer .edition-target.re-content > .tracktable, .page-subcontainer .edition-target.le-content > .tracktable, .page-subcontainer .edition-target.dx-content > .tracktable, .page-subcontainer .edition-target.re-content > .mvtable, .page-subcontainer .edition-target.le-content > .mvtable, .page-subcontainer .edition-target.dx-content > .mvtable, .page-subcontainer .edition-target.re-content > .infotable, .page-subcontainer .edition-target.le-content > .infotable, .page-subcontainer .edition-target.dx-content > .infotable
{
    width: 100%;
}




/* Tables */
.table-container > table
{
    overflow-x: auto;
}

.tracktable
{
    color: #222;
    margin: 1em auto;
    border-collapse: collapse;
    width: 85%;
    table-layout: fixed;
}

.tracktable th
{
    border-bottom: 1px solid #a2a9b1;
}

.tracktable th:first-child
{
    width: 22px;
    text-align: left;
}

.tracktable th:last-child
{
    width: 56px;
    text-align: right;
}

.tracktable tr
{
    padding-top: 5px;
    padding-bottom: 5px;
}

.tracktable tr:nth-child(even)
{
    background-color: #f8f9fa;
}

.tracktable td
{
    border-bottom: 1px solid #a2a9b1;
}

.tracktable td:first-child
{
    padding-left: 2px;
}

.tracktable td:nth-child(2)
{
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}

.tracktable td:last-child
{
    text-align: right;
    padding-right: 2px;
}

.tracktable-vocal
{
    color: #222;
    margin: 1em auto;
    border-collapse: collapse;
    width: 85%;
    table-layout: fixed;
}

.tracktable-vocal th
{
    border-bottom: 1px solid #a2a9b1;
}

.tracktable-vocal th:first-child
{
    width: 22px;
    text-align: left;
}

.tracktable-vocal th:last-child
{
    width: 146px;
    /* text-align: right; */
}

.tracktable-vocal tr
{
    padding-top: 5px;
    padding-bottom: 5px;
}

.tracktable-vocal tr:nth-child(even)
{
    background-color: #f8f9fa;
}

.tracktable-vocal td
{
    border-bottom: 1px solid #a2a9b1;
}

.tracktable-vocal td:first-child
{
    padding-left: 2px;
}

.tracktable-vocal td:nth-child(2)
{
    text-align: center;
    padding-left: 10px;
    padding-right: 5px;
}

.tracktable-vocal td:last-child
{
    text-align: center;
    padding-right: 2px;
}

.tracktable-4col
{
    color: #222;
    margin: 1em auto;
    border-collapse: collapse;
    width: 85%;
    table-layout: fixed;
}

.tracktable-4col th
{
    border-bottom: 1px solid #a2a9b1;
}

.tracktable-4col th:first-child
{
    width: 22px;
    text-align: left;
}

.tracktable-4col th:nth-child(2)
{
    width: 214px;
}

.tracktable-4col th:last-child
{
    width: 56px;
    text-align: right;
}


.tracktable-4col tr
{
    padding-top: 5px;
    padding-bottom: 5px;
}

.tracktable-4col tr:nth-child(even)
{
    background-color: #f8f9fa;
}

.tracktable-4col td
{
    border-bottom: 1px solid #a2a9b1;
}

.tracktable-4col td:first-child
{
    padding-left: 2px;
}

.tracktable-4col td:nth-child(2)
{
    text-align: center;
    padding-left: 3px;
    padding-right: 3px;
}

.tracktable-4col td:nth-child(3)
{
    text-align: center;
    padding-left: 3px;
    padding-right: 3px;
}

.tracktable-4col td:last-child
{
    text-align: right;
    padding-right: 2px;

}

.mvtable
{
    color: #222;
    margin: 1em auto;
    border-collapse: collapse;
    width: 85%;
    table-layout: fixed;
}

.mvtable th
{
    border-bottom: 1px solid #a2a9b1;
}

.mvtable th:first-child
{
    width: 14px;
    text-align: left;
}

.mvtable th:nth-child(3)
{
    width: 160px;
}

.mvtable th:last-child
{
    width: 56px;
    text-align: right;
}

.mvtable tr
{
    padding-top: 5px;
    padding-bottom: 5px;
}

.mvtable tr:nth-child(even)
{
    background-color: #f8f9fa;
}

.mvtable td
{
    border-bottom: 1px solid #a2a9b1;
}

.mvtable td:first-child
{
    padding-left: 2px;
}

.mvtable td:nth-child(2)
{
    text-align: center;
    padding-left: 3px;
    padding-right: 3px;
}

.mvtable td:nth-child(3)
{
    text-align: center;
    padding-left: 3px;
    padding-right: 3px;
}

.mvtable td:last-child
{
    text-align: right;
    padding-right: 2px;
}

.filetable-3col
{
    color: #222;
    margin: 1em auto;
    border-collapse: collapse;
    width: 85%;
    table-layout: fixed;
}

.filetable-3col th
{
    border-bottom: 1px solid #a2a9b1;
}

.filetable-3col th:first-child
{
    width: 112px;
    text-align: left;
}

.filetable-3col th:last-child
{
    width: 56px;
    text-align: right;
}

.filetable-3col tr
{
    padding-top: 5px;
    padding-bottom: 5px;
}

.filetable-3col tr:nth-child(even)
{
    background-color: #f8f9fa;
}

.filetable-3col td
{
    border-bottom: 1px solid #a2a9b1;
}

.filetable-3col td:first-child
{
    padding-left: 2px;
}

.filetable-3col td:nth-child(2)
{
    text-align: center;
    padding-left: 3px;
    padding-right: 3px;
}

.filetable-3col td:last-child
{
    text-align: right;
    padding-right: 2px;
}

.filetable-4col
{
    color: #222;
    margin: 1em auto;
    border-collapse: collapse;
    width: 85%;
    table-layout: fixed;
}

.filetable-4col th
{
    border-bottom: 1px solid #a2a9b1;
}

.filetable-4col th:first-child
{
    width: 105px;
    text-align: left;
}

.filetable-4col th:nth-child(2)
{
    width: 150px;
}

.filetable-4col th:last-child
{
    width: 56px;
    text-align: right;
}

.filetable-4col tr
{
    padding-top: 5px;
    padding-bottom: 5px;
}

.filetable-4col tr:nth-child(even)
{
    background-color: #f8f9fa;
}

.filetable-4col td
{
    border-bottom: 1px solid #a2a9b1;
}

.filetable-4col td:first-child
{
    padding-left: 2px;
}

.filetable-4col td:nth-child(2)
{
    text-align: center;
    padding-left: 3px;
    padding-right: 3px;
}

.filetable-4col td:nth-child(3)
{
    text-align: center;
    padding-left: 3px;
    padding-right: 3px;
}

.filetable-4col td:last-child
{
    text-align: right;
    padding-right: 2px;
}

.infotable-2col
{
    color: #222;
    margin: 1em auto;
    border-collapse: collapse;
    width: 85%;
    table-layout: fixed;
}

.infotable-2col th
{
    border-bottom: 1px solid #a2a9b1;
}

.infotable-2col th:first-child
{
    width: 210px;
    text-align: left;
}

.infotable-2col tr
{
    padding-top: 5px;
    padding-bottom: 5px;
}

.infotable-2col tr:nth-child(even)
{
    background-color: #f8f9fa;
}

.infotable-2col td
{
    border-bottom: 1px solid #a2a9b1;
}

.infotable-2col td:first-child
{
    padding-left: 2px;
}

.infotable-2col td:nth-child(2)
{
    text-align: center;
    padding-left: 3px;
    padding-right: 3px;
}

.infotable-2col-numbered
{
    color: #222;
    margin: 1em auto;
    border-collapse: collapse;
    width: 85%;
    table-layout: fixed;
}

.infotable-2col-numbered th
{
    border-bottom: 1px solid #a2a9b1;
}

.infotable-2col-numbered th:first-child
{
    width: 22px;
    text-align: left;
}

.infotable-2col-numbered tr
{
    padding-top: 5px;
    padding-bottom: 5px;
}

.infotable-2col-numbered tr:nth-child(even)
{
    background-color: #f8f9fa;
}

.infotable-2col-numbered td
{
    border-bottom: 1px solid #a2a9b1;
}

.infotable-2col-numbered td:first-child
{
    padding-left: 2px;
}

.infotable-2col-numbered td:nth-child(2)
{
    text-align: center;
    padding-left: 3px;
    padding-right: 3px;
}

.infotable-3col
{
    color: #222;
    margin: 1em auto;
    border-collapse: collapse;
    width: 85%;
    table-layout: fixed;
}

.infotable-3col th
{
    border-bottom: 1px solid #a2a9b1;
}

.infotable-3col th:first-child
{
    width: 128px;
}

.infotable-3col th:nth-child(2)
{
    width: 210px;
}

.infotable-3col tr
{
    padding-top: 5px;
    padding-bottom: 5px;
}

.infotable-3col tr:nth-child(even)
{
    background-color: #f8f9fa;
}

.infotable-3col td
{
    border-bottom: 1px solid #a2a9b1;
}

.infotable-3col td:first-child
{
    padding-left: 2px;
}

.infotable-3col td:nth-child(2)
{
    text-align: left;
    padding-left: 3px;
    padding-right: 3px;
}

.infotable-3col td:last-child
{
    text-align: left;
    padding-right: 2px;
}

.infotable-3col-even
{
    color: #222;
    margin: 1em auto;
    border-collapse: collapse;
    width: 85%;
    table-layout: fixed;
}

.infotable-3col-even th
{
    border-bottom: 1px solid #a2a9b1;
}

.infotable-3col-even th:first-child
{
    /* width: 112px; */
    /* text-align: left; */
}

.infotable-3col-even th:last-child
{
    /* width: 56px; */
    /* text-align: right; */
}

.infotable-3col-even tr
{
    padding-top: 5px;
    padding-bottom: 5px;
}

.infotable-3col-even tr:nth-child(even)
{
    background-color: #f8f9fa;
}

.infotable-3col-even td
{
    border-bottom: 1px solid #a2a9b1;
}

.infotable-3col-even td:first-child
{
    padding-left: 2px;
}

.infotable-3col-even td:nth-child(2)
{
    text-align: left;
    padding-left: 3px;
    padding-right: 3px;
}

.infotable-3col-even td:last-child
{
    text-align: left;
    padding-right: 2px;
}
Retrieved from "https://blankchronicle.com/index.php?title=User:Aardvark/TableTest.css&oldid=6511"