User:Aardvark/TableTest.css

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

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: 'Filename';
        font-weight: bold;
    }

    table.infotable.four-col.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.responsive-table td:nth-child(2):before
    {
        content: 'Open';
        font-weight: bold;
    }

    table.infotable.four-col.responsive-table td:nth-child(3):before
    {
        content: 'Start';
        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.infotable.four-col.responsive-table td:nth-child(4):before
    {
        content: 'Venue';
        font-weight: bold;
    }

    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
    {
        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,
    table.infotable.four-col.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.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)
    {
        padding: .5em .5em .5em 110px;
        text-align: left;
    }

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

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