User:Aardvark/TableTest.css

table.tracktable, table.mvtable, table.filetable, table.infotable, table.wikitable
{
    border-collapse: collapse;
    color: black;
    margin: 1em auto;
    width: 85%;
    table-layout: auto;
}

table.tracktable tr:nth-child(even), table.mvtable tr:nth-child(even), table.filetable tr:nth-child(even), table.infotable tr:nth-child(even)
{
    background: #f8f9fa;
}

table.tracktable th, table.tracktable td, table.tracktable.vocal th, table.tracktable.vocal td
{
    border-bottom: 1px solid #9e9e9e;
}

table.tracktable th:first-child
{
    text-align: left;
}

table.tracktable th:last-child
{
    text-align: right;
}

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

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

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

table.tracktable.four-col th:nth-child(2), table.tracktable.four-col td:nth-child(2), table.tracktable.four-col th:nth-child(3), table.tracktable.four-col td:nth-child(3)
{
    text-align: left;
}

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

    table.tracktable tr:nth-child(even)
    {
        background: none;
    }

    table.tracktable td
    {
        border: 1px solid #9e9e9e;
        padding: .5em;
    }

    table.tracktable.responsive-table tr:nth-child(1)
    {
        display: none;
    }  

    table.tracktable.responsive-table td:nth-child(1):before
    {
        content: '#';
    }

    table.tracktable.responsive-table td:nth-child(2):before
    {
        content: 'Title';
    }

    table.tracktable.responsive-table td:nth-child(3):before
    {
        content: 'Length ';
        font-weight: bold;
    }

    table.tracktable.vocal.responsive-table td:nth-child(3):before
    {
        content: 'Lead ';
        font-weight: bold;
    }

    table.tracktable.four-col.responsive-table td:nth-child(3):before
    {
        content: 'Description: ';
        font-weight: bold;
        position: absolute;
        left: 0.5em;
    }

    table.tracktable.four-col.responsive-table td:nth-child(4):before
    {
        content: 'Length ';
        font-weight: bold;
    }

    table.tracktable.responsive-table td:nth-child(1):before,
    table.tracktable.responsive-table td:nth-child(2):before
    {
        position: absolute;
        left: .5em;
        font-weight: bold;
    }
  
    table.tracktable.responsive-table tr,
    table.tracktable.responsive-table td
    {
        display: block;
    }

    table.tracktable.responsive-table tr
    {
        position: relative;
        margin-bottom: 1em;
        box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
    }

    table.tracktable.responsive-table td
    {
        border-top: none;
    }

    table.tracktable.responsive-table td:first-child
    {
        background: #f8f9fa;
        border-top: 1px solid #9e9e9e;
        padding-left: 19px;
    }

    table.tracktable.responsive-table td:nth-child(2)
    {
        background: #ffffff;
        padding-left: 47px;
        padding-right: .5em;
        text-align: center;
    }

    table.tracktable.responsive-table td:nth-child(3)
    {
        position: absolute;
        top: 0;
        right: 0;
        background: none;
        padding: 10px 0.5em 0px 0;
    }

    table.tracktable.four-col.responsive-table td:nth-child(3)
    {
        position: static;
        border: 1px solid #9e9e9e;
        border-top: none;
        padding: .5em .5em .5em 110px;
    }

    table.tracktable.four-col.responsive-table td:nth-child(4)
    {
        position: absolute;
        top: 0;
        right: 0;
        border: none;
        background: none;
        padding: 10px 0.5em 0px 0;
    }
}




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: 'Title';
  }
  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;
    }

    /* Remove when Finished */
    .filetable-4col, .tracktable-4col, .tracktable-vocal, .tracktable, .wikitable, .tracktable, .mvtable, .filetable, .infotable
    {
        width: 100%!important;
    }
}




.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%;
}


/* Remove when Finished */
.tracktable tr, .tracktable.vocal tr
{
    padding: 0;
}






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

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



.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 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;
}


.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;
}