User:Aardvark/TableTest.css: Difference between revisions

From Blank Chronicle
No edit summary
No edit summary
 
(73 intermediate revisions by the same user not shown)
Line 1: Line 1:
table.tracktable, table.mvtable, table.filetable, table.infotable, table.wikitable
/* Tables */
.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 > .filetable,
.page-subcontainer .edition-target.le-content > .filetable,
.page-subcontainer .edition-target.dx-content > .filetable,
.page-subcontainer .edition-target.re-content > .infotable,
.page-subcontainer .edition-target.le-content > .infotable,
.page-subcontainer .edition-target.dx-content > .infotable,
.page-subcontainer .media-target.dvd-content > .tracktable,
.page-subcontainer .media-target.dvd-content > .mvtable,
.page-subcontainer .media-target.dvd-content > .filetable,
.page-subcontainer .media-target.dvd-content > .infotable,
.page-subcontainer .media-target.bd-content > .tracktable,
.page-subcontainer .media-target.bd-content > .mvtable,
.page-subcontainer .media-target.bd-content > .filetable,
.page-subcontainer .media-target.bd-content > .infotable
{
    width: 100%;
}
 
table.tracktable,  
table.mvtable,  
table.filetable,  
table.infotable,  
table.wikitable
{
{
     border-collapse: collapse;
     border-collapse: collapse;
Line 8: Line 38:
}
}


table.tracktable tr:nth-child(even), table.mvtable tr:nth-child(even), table.filetable tr:nth-child(even), table.infotable tr:nth-child(even)
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;
     background: #f8f9fa;
}
}


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


table.tracktable th:first-child
table.tracktable th:first-child,
table.mvtable th:first-child,
table.filetable th:first-child,
table.infotable th,
table.infotable td
{
{
     text-align: left;
     text-align: left;
}
}


table.tracktable th:last-child
table.tracktable th:last-child,
table.mvtable th:last-child,
table.filetable th:last-child
{
{
     text-align: right;
     text-align: right;
Line 31: Line 79:
{
{
     padding-left: 2px;
     padding-left: 2px;
    width: 30px;
}
table.tracktable td:last-child
{
    width: 50px;
}
}


Line 40: Line 94:
}
}


table.tracktable td:last-child
table.tracktable td:last-child,
table.filetable td:last-child
{
{
     text-align: right;
     text-align: right;
Line 46: Line 101:
}
}


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)
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),
table.mvtable th:nth-child(2),
table.mvtable td:nth-child(2),
table.mvtable th:nth-child(3),
table.mvtable td:nth-child(3),
table.filetable.three-col th:nth-child(2),
table.filetable.three-col td:nth-child(2)
{
    text-align: left;
}
 
table.tracktable.four-col th:nth-child(2),
table.tracktable.four-col td:nth-child(2),
table.mvtable th:nth-child(2),
table.mvtable td:nth-child(2),
table.filetable.three-col th:nth-child(2),
table.filetable.three-col td:nth-child(2)
{
    padding-left: 36px;
    padding-right: 4px;
}
 
table.filetable.four-col th:nth-child(2),
table.filetable.four-col td:nth-child(2)
{
{
    padding-left: 18px;
     text-align: left;
     text-align: left;
    width: 140px;
}
table.filetable.four-col th:nth-child(3),
table.filetable.four-col td:nth-child(3)
{
    padding-left: 24px;
    padding-right: 9px;
    text-align: left;
}
table.infotable th,
table.infotable td
{
    padding-left: .5em;
    padding-right: .5em;
}
table.infotable th:first-child,
table.infotable td:first-child
{
    padding-left: 2px;
}
table.infotable th:last-child,
table.infotable td:last-child
{
    padding-right: 2px;
}
table.infotable.two-col.numbered th:first-child,
table.infotable.two-col.numbered td:first-child
{
    padding-right: 2px;
}
}


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


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


     table.tracktable td
     table.responsive-table td
     {
     {
         border: 1px solid #9e9e9e;
         border: 1px solid #9e9e9e;
Line 64: Line 180:
     }
     }


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


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


     table.tracktable.responsive-table td:nth-child(2):before
    table.filetable.responsive-table td:nth-child(1):before
    {
        content: 'File';
        font-weight: bold;
    }
 
    table.infotable.four-col.tour.responsive-table td:nth-child(1):before
    {
        content: 'Date';
        font-weight: bold;
    }
 
     table.tracktable.responsive-table td:nth-child(2):before,
    table.mvtable.responsive-table td:nth-child(2):before,
    table.filetable.four-col.responsive-table td:nth-child(2):before
     {
     {
         content: 'Title';
         content: 'Title';
     }
     }


     table.tracktable.responsive-table td:nth-child(3):before
    table.infotable.four-col.tour.responsive-table td:nth-child(2):before
    {
        content: 'Open';
        font-weight: bold;
    }
 
    table.infotable.four-col.tour.responsive-table td:nth-child(3):before
    {
        content: 'Start';
        font-weight: bold;
    }
 
    table.infotable.four-col.tour.responsive-table td:nth-child(4):before
    {
        content: 'Venue';
        font-weight: bold;
    }
 
    table.filetable.three-col.responsive-table td:nth-child(2):before,
    table.filetable.four-col.responsive-table td:nth-child(3):before
    {
        content: 'Content';
        font-weight: bold;
    }
 
    table.tracktable.responsive-table td:nth-child(3):before,
     table.tracktable.four-col.responsive-table td:nth-child(4):before,
    table.mvtable.responsive-table td:nth-child(4):before,
    table.filetable.three-col.responsive-table td:nth-child(3):before,
    table.filetable.four-col.responsive-table td:nth-child(4):before
     {
     {
         content: 'Length ';
         content: 'Length ';
Line 94: Line 254:
     {
     {
         content: 'Description ';
         content: 'Description ';
    }
    table.mvtable.responsive-table td:nth-child(3):before
    {
        content: 'Details ';
         font-weight: bold;
         font-weight: bold;
        position: absolute;
        left: 0.5em;
     }
     }


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


     table.tracktable.responsive-table td:nth-child(1):before,
     table.tracktable.responsive-table td:nth-child(1):before,
     table.tracktable.responsive-table td:nth-child(2):before
     table.tracktable.responsive-table td:nth-child(2):before,
    table.mvtable.responsive-table td:nth-child(1):before,
    table.mvtable.responsive-table td:nth-child(2):before,
    table.tracktable.four-col.responsive-table td:nth-child(3):before,
    table.mvtable.responsive-table td:nth-child(3):before,
    table.filetable.responsive-table td:nth-child(1):before,
    table.filetable.three-col.responsive-table td:nth-child(2):before,
    table.filetable.four-col.responsive-table td:nth-child(2):before,
    table.filetable.four-col.responsive-table td:nth-child(3):before,
    table.infotable.four-col.responsive-table td:nth-child(1):before,
    table.infotable.four-col.responsive-table td:nth-child(2):before,
    table.infotable.four-col.responsive-table td:nth-child(3):before,
    table.infotable.four-col.responsive-table td:nth-child(4):before
     {
     {
         position: absolute;
         position: absolute;
Line 114: Line 293:
    
    
     table.tracktable.responsive-table tr,
     table.tracktable.responsive-table tr,
     table.tracktable.responsive-table td
     table.tracktable.responsive-table td,
    table.mvtable.responsive-table tr,
    table.mvtable.responsive-table td,
    table.filetable.responsive-table tr,
    table.filetable.responsive-table td,
    table.infotable.four-col.responsive-table tr,
    table.infotable.four-col.responsive-table td
     {
     {
         display: block;
         display: block;
     }
     }


     table.tracktable.responsive-table tr
     table.tracktable.responsive-table tr,
    table.mvtable.responsive-table tr,
    table.filetable.responsive-table tr,
    table.infotable.four-col.responsive-table tr
     {
     {
         position: relative;
         position: relative;
Line 126: Line 314:
     }
     }


     table.tracktable.responsive-table td
     table.tracktable.responsive-table td,
    table.mvtable.responsive-table td,
    table.filetable.responsive-table td,
    table.infotable.four-col.responsive-table td
     {
     {
         border-top: none;
         border-top: none;
     }
     }


     table.tracktable.responsive-table td:first-child
     table.tracktable.responsive-table td:first-child,
    table.mvtable.responsive-table td:first-child,
    table.filetable.responsive-table td:first-child
     {
     {
         background: #f8f9fa;
         background: #f8f9fa;
         border-top: 1px solid #9e9e9e;
         border-top: 1px solid #9e9e9e;
         padding-left: 19px;
         padding-left: 19px;
    }
    table.infotable.four-col.responsive-table td:first-child
    {
        background: #f8f9fa;
        border-top: 1px solid #9e9e9e;
        padding-left: 50px;
    }
    table.infotable.four-col.tour.responsive-table td:nth-child(2)
    {
        padding-left: 54px;
        border-top: none;
    }
    table.infotable.four-col.tour.responsive-table td:nth-child(3)
    {
        position: absolute;
        right: 0;
        top: 43.33px;
        padding-left: 50px;
        border: none;
    }
    table.infotable.four-col.tour.responsive-table td:last-child
    {
        border-top: none;
     }
     }


Line 146: Line 366:
     }
     }


     table.tracktable.responsive-table td:nth-child(3)
    table.filetable.four-col th:nth-child(2),
    table.filetable.four-col td:nth-child(2)
    {
        width: unset;
    }
 
     table.tracktable.four-col.responsive-table td:nth-child(2),
    table.mvtable.responsive-table td:nth-child(2),
    table.filetable.responsive-table td:first-child,
    table.filetable.responsive-table td:nth-child(2),
    table.filetable.four-col.responsive-table td:nth-child(3),
    table.infotable.four-col.responsive-table td:nth-child(4)
    {
        padding: .5em .5em .5em 75px;
        text-align: left;
    }
 
    table.filetable.responsive-table td:first-child
    {
        padding-left: 40px;
    }
 
    table.tracktable.responsive-table td:nth-child(3),
    table.filetable.three-col.responsive-table td:nth-child(3)
     {
     {
         position: absolute;
         position: absolute;
Line 152: Line 395:
         right: 0;
         right: 0;
         background: none;
         background: none;
        border: none;
         padding: 10px 0.5em 0px 0;
         padding: 10px 0.5em 0px 0;
     }
     }


     table.tracktable.four-col.responsive-table td:nth-child(3)
     table.tracktable.four-col.responsive-table td:nth-child(3),
    table.mvtable.responsive-table td:nth-child(3)
     {
     {
         position: static;
         position: static;
Line 163: Line 408:
     }
     }


     table.tracktable.four-col.responsive-table td:nth-child(4)
     table.tracktable.four-col.responsive-table td:nth-child(4),
    table.mvtable.responsive-table td:nth-child(4),
    table.filetable.four-col.responsive-table td:nth-child(4)
     {
     {
         position: absolute;
         position: absolute;
Line 172: Line 419:
         padding: 10px 0.5em 0px 0;
         padding: 10px 0.5em 0px 0;
     }
     }
}


 
     table.tracktable, table.mvtable, table.filetable, table.wikitable, table.infotable
 
 
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;
        table-layout: auto;
         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%;
}
/* 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;
}
}

Latest revision as of 19:08, 1 February 2021

/* Tables */
.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 > .filetable, 
.page-subcontainer .edition-target.le-content > .filetable, 
.page-subcontainer .edition-target.dx-content > .filetable, 
.page-subcontainer .edition-target.re-content > .infotable, 
.page-subcontainer .edition-target.le-content > .infotable, 
.page-subcontainer .edition-target.dx-content > .infotable,
.page-subcontainer .media-target.dvd-content > .tracktable,
.page-subcontainer .media-target.dvd-content > .mvtable,
.page-subcontainer .media-target.dvd-content > .filetable,
.page-subcontainer .media-target.dvd-content > .infotable,
.page-subcontainer .media-target.bd-content > .tracktable,
.page-subcontainer .media-target.bd-content > .mvtable,
.page-subcontainer .media-target.bd-content > .filetable,
.page-subcontainer .media-target.bd-content > .infotable
{
    width: 100%;
}

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, 
table.mvtable th, 
table.mvtable td,
table.filetable th, 
table.filetable td,
table.infotable th, 
table.infotable td
{
    border-bottom: 1px solid #9e9e9e;
}

table.tracktable th:first-child, 
table.mvtable th:first-child,
table.filetable th:first-child,
table.infotable th,
table.infotable td
{
    text-align: left;
}

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

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

table.tracktable td:last-child
{
    width: 50px;
}

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

table.tracktable td:last-child,
table.filetable 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),
table.mvtable th:nth-child(2), 
table.mvtable td:nth-child(2), 
table.mvtable th:nth-child(3), 
table.mvtable td:nth-child(3),
table.filetable.three-col th:nth-child(2),
table.filetable.three-col td:nth-child(2)
{
    text-align: left;
}

table.tracktable.four-col th:nth-child(2), 
table.tracktable.four-col td:nth-child(2), 
table.mvtable th:nth-child(2), 
table.mvtable td:nth-child(2),
table.filetable.three-col th:nth-child(2),
table.filetable.three-col td:nth-child(2)
{
    padding-left: 36px;
    padding-right: 4px;
}

table.filetable.four-col th:nth-child(2),
table.filetable.four-col td:nth-child(2)
{
    padding-left: 18px;
    text-align: left;
    width: 140px;
}

table.filetable.four-col th:nth-child(3),
table.filetable.four-col td:nth-child(3)
{
    padding-left: 24px;
    padding-right: 9px;
    text-align: left;
}

table.infotable th,
table.infotable td
{
    padding-left: .5em;
    padding-right: .5em;
}

table.infotable th:first-child,
table.infotable td:first-child
{
    padding-left: 2px;
}

table.infotable th:last-child,
table.infotable td:last-child
{
    padding-right: 2px;
}

table.infotable.two-col.numbered th:first-child,
table.infotable.two-col.numbered td:first-child
{
    padding-right: 2px;
}

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

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

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

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

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

    table.filetable.responsive-table td:nth-child(1):before
    {
        content: 'File';
        font-weight: bold;
    }

    table.infotable.four-col.tour.responsive-table td:nth-child(1):before
    {
        content: 'Date';
        font-weight: bold; 
    }

    table.tracktable.responsive-table td:nth-child(2):before,
    table.mvtable.responsive-table td:nth-child(2):before,
    table.filetable.four-col.responsive-table td:nth-child(2):before
    {
        content: 'Title';
    }

    table.infotable.four-col.tour.responsive-table td:nth-child(2):before
    {
        content: 'Open';
        font-weight: bold; 
    }

    table.infotable.four-col.tour.responsive-table td:nth-child(3):before
    {
        content: 'Start';
        font-weight: bold; 
    }

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

    table.filetable.three-col.responsive-table td:nth-child(2):before,
    table.filetable.four-col.responsive-table td:nth-child(3):before
    {
        content: 'Content';
        font-weight: bold;
    }

    table.tracktable.responsive-table td:nth-child(3):before,
    table.tracktable.four-col.responsive-table td:nth-child(4):before,
    table.mvtable.responsive-table td:nth-child(4):before,
    table.filetable.three-col.responsive-table td:nth-child(3):before,
    table.filetable.four-col.responsive-table td:nth-child(4):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 ';
    }

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

    table.tracktable td:first-child
    {
        width: unset;
    }

    table.tracktable td:last-child
    {
        width: unset;
    }

    table.tracktable.responsive-table td:nth-child(1):before,
    table.tracktable.responsive-table td:nth-child(2):before,
    table.mvtable.responsive-table td:nth-child(1):before,
    table.mvtable.responsive-table td:nth-child(2):before,
    table.tracktable.four-col.responsive-table td:nth-child(3):before,
    table.mvtable.responsive-table td:nth-child(3):before,
    table.filetable.responsive-table td:nth-child(1):before,
    table.filetable.three-col.responsive-table td:nth-child(2):before,
    table.filetable.four-col.responsive-table td:nth-child(2):before,
    table.filetable.four-col.responsive-table td:nth-child(3):before,
    table.infotable.four-col.responsive-table td:nth-child(1):before,
    table.infotable.four-col.responsive-table td:nth-child(2):before,
    table.infotable.four-col.responsive-table td:nth-child(3):before,
    table.infotable.four-col.responsive-table td:nth-child(4):before
    {
        position: absolute;
        left: .5em;
        font-weight: bold;
    }
  
    table.tracktable.responsive-table tr,
    table.tracktable.responsive-table td,
    table.mvtable.responsive-table tr,
    table.mvtable.responsive-table td,
    table.filetable.responsive-table tr,
    table.filetable.responsive-table td,
    table.infotable.four-col.responsive-table tr,
    table.infotable.four-col.responsive-table td
    {
        display: block;
    }

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

    table.tracktable.responsive-table td,
    table.mvtable.responsive-table td,
    table.filetable.responsive-table td,
    table.infotable.four-col.responsive-table td
    {
        border-top: none;
    }

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

    table.infotable.four-col.responsive-table td:first-child
    {
        background: #f8f9fa;
        border-top: 1px solid #9e9e9e;
        padding-left: 50px;
    }

    table.infotable.four-col.tour.responsive-table td:nth-child(2)
    {
        padding-left: 54px;
        border-top: none;
    }

    table.infotable.four-col.tour.responsive-table td:nth-child(3)
    {
        position: absolute;
        right: 0;
        top: 43.33px;
        padding-left: 50px;
        border: none;
    }

    table.infotable.four-col.tour.responsive-table td:last-child
    {
        border-top: none;
    }

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

    table.filetable.four-col th:nth-child(2),
    table.filetable.four-col td:nth-child(2)
    {
        width: unset;
    }

    table.tracktable.four-col.responsive-table td:nth-child(2),
    table.mvtable.responsive-table td:nth-child(2),
    table.filetable.responsive-table td:first-child,
    table.filetable.responsive-table td:nth-child(2),
    table.filetable.four-col.responsive-table td:nth-child(3),
    table.infotable.four-col.responsive-table td:nth-child(4)
    {
        padding: .5em .5em .5em 75px;
        text-align: left;
    }

    table.filetable.responsive-table td:first-child
    {
        padding-left: 40px;
    }

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

    table.tracktable.four-col.responsive-table td:nth-child(3),
    table.mvtable.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),
    table.mvtable.responsive-table td:nth-child(4),
    table.filetable.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.tracktable, table.mvtable, table.filetable, table.wikitable, table.infotable
    {
        table-layout: auto;
        width: 100%;
    }
}
Retrieved from "https://blankchronicle.com/index.php?title=User:Aardvark/TableTest.css&oldid=7858"