tablebody {
     margin: 0
}
 tablebody {
     font: 14px/1.4 'Spinnaker', sans-serif;
     color: #000;
     background-color: #fff;
}
 .page-wrap {
     margin: 0px 2%;
}
 table {
     border-collapse: collapse;
     border-spacing: 0
}
 td,th {
     padding: 0
}
 table {
     width: 100%;
     border-collapse: collapse;
}
/* Zebra striping */
 tr:nth-of-type(odd) {
     background: #F0EEEE;
     color: #000;
}
 tr:nth-of-type(even) {
     background: #fff;
     color: #000;
}
 th {
     background: #000;
     color: #fff;
     font-weight: bold;
}
 tr:hover {
     background-color:#000;
     color:#fff;
     -moz-transition: all .3s ease-in;
     -webkit-transition: all .3s ease-in;
     -o-transition: all .3s ease-in;
     transition: all .3s ease-in;
     cursor: pointer;
}
 td, th {
     font-family: 'Lato', Calibri, Arial, sans-serif;
     padding: 6px;
     border: 1px solid #002A4A;
     text-align: left;
     font-size: 17px;
     line-height: 23px;
}
/* Max width before this PARTICULAR table gets nasty This query will take effect for any screen smaller than 760px and also iPads specifically. */
 @media only screen and (max-width: 1100px) {
     td, th {
         padding: 6px;
         border: 1px solid #002A4A;
         text-align: left;
         font-size: 15px;
    }
}
 @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
    /* Force table to not be like tables anymore */
     table, thead, tbody, th, td, tr {
         display: block;
    }
    /* Hide table headers (but not display: none;
    , for accessibility) */
     thead tr {
         position: absolute;
         top: -9999px;
         left: -9999px;
    }
     tr {
         border: 1px solid #ccc;
    }
     td {
        /* Behave like a "row" */
         border: none;
         border-bottom: 1px solid #ddd;
         position: relative;
         padding-left: 30%;
    }
     td:before {
        /* Now like a table header */
         position: absolute;
        /* Top/left values mimic padding */
         top: 6px;
         left: 6px;
         width: 45%;
         padding-right: 10px;
         white-space: nowrap;
    }
    /* Label the data */
     td:nth-of-type(1):before {
         content: "Jahr";
    }
     td:nth-of-type(2):before {
         content: "Theater";
    }
     td:nth-of-type(3):before {
         content: "Rolle";
    }
     td.film:nth-of-type(1):before {
         content: "Jahr";
    }
     td.film:nth-of-type(2):before {
         content: "Titel";
    }
     td.sonst:nth-of-type(1):before {
         content: "Tätigkeit";
    }
     td.sonst:nth-of-type(2):before {
         content: "Details";
    }
}
/* Smartphones (portrait and landscape) ----------- */
 @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
     tablebody {
         padding: 0;
         margin: 0;
         width: 320px;
    }
    ;
}
/* iPads (portrait and landscape) ----------- */
 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
     tablebody {
         width: 495px;
    }
}