It is necessary that the table head stick during the animation.

div.container { width: 96vw; } @keyframes mymove { 0% { margin-bottom: 0vh; } 100% { margin-bottom: -228vmax; } } html { background-color: #7F7F7F; } footer { font-size: 2.2vw; color: white; background-color: #7F7F7F; clear: left; text-align: center; height: 5vh; } article { padding: 0px; overflow: hidden; background: #7F7F7F; margin: 0 0 0; column-span: all; } .lux { border-collapse: collapse; width: 96vw; } .lux tr { background-color: #595959; } .lux td { border: 3px solid white; padding: 5px; } #headTime { text-align: center; color: white; border: 0px; font-size: 2.2vw; font-weight: normal; background-color: #7F7F7F; } #headLable { text-align: center; color: white; border: 0px; font-size: 2.2vw; background-color: #7F7F7F; } #head { text-align: center; color: white; font-size: 2.2vw; font-: normal; font-style: normal; background-color: #7F7F7F; } #lable { text-align: center; color: white; border: 3px solid white; font-size: 2.5vw; background-color: #F79646; border-collapse: collapse; font-family: sans-serif; width: 19.5vw; } #body { width: 19.5vw; color: white; text-align: center; font-size: 2.2vw; border-top: 2px solid white; } #bodyleft { width: 19vw; color: white; text-align: left; font-size: 2.2vw; } #bodyTime { text-align: center; font-size: 2.2vw; color: #F79646; } #header { position: fixed; z-index: 9999; } #headerMain { margin: 0px auto; z-index: 0; } .tbody { position: relative; animation: mymove 5s infinite; animation-delay: 2s; animation-duration: 90s; animation-timing-function: stepscubic-bezier(0, 0, 1, 1); animation-direction: normal; animation-iteration-count: infinite; } 
 <div class="container"> <article> <table class="lux"> <div id="headerMain"> <div id="header"> <table class="lux"> <thead> <tr> <th id="head" colspan="5">ООА </th> </tr> <tr> <th id="headTime" colspan="1">16:10</th> <th id="headTime" colspan="1"></th> <th id="headLable" colspan="1">ПРИЛЕТ</th> <th id="headTime" colspan="1"></th> <th id="headTime" colspan="1">16.01.2018</th> </tr> <tr> <th id="lable">РЕЙС</th> <th id="lable">ПУНКТ НАЗНАЧЕНИЯ</th> <th id="lable">КОД</th> <th id="lable">РАСПИСАНИЕ</th> <th id="lable">СТАТУС</th> </tr> </thead> </table> </div> </div> <table class="lux"> <div class="tbody"> <tbody> <tr> <td id="bodyleft">SU1123</td> <td id="bodyleft">Сочи</td> <td id="body">AER</td> <td id="body">15:01</td> <td id="body">Landed</td> </tr> <tr> <td id="bodyleft">SU1311</td> <td id="bodyleft">Минеральные воды</td> <td id="body">MRV</td> <td id="body">15:10</td> <td id="body">Landed</td> </tr> <tr> <td id="bodyleft">SU1413</td> <td id="bodyleft">Екатеринбург</td> <td id="body">SVX</td> <td id="body">15:11</td> <td id="body">Landed</td> </tr> <tr> <td id="bodyleft">BT428</td> <td id="bodyleft">Рига</td> <td id="body">RIX</td> <td id="body">15:13</td> <td id="body">Landed</td> </tr> <tr> <td id="bodyleft">SU1003</td> <td id="bodyleft">Калининград</td> <td id="body">KGD</td> <td id="body">15:14</td> <td id="body">Landed</td> </tr> <tr> <td id="bodyleft">SU1463</td> <td id="bodyleft">Новосибирск</td> <td id="body">OVB</td> <td id="body">15:20</td> <td id="body">Draft</td> </tr> <tr> <td id="bodyleft">SU1521</td> <td id="bodyleft">Новый Уренгой</td> <td id="body">NUX</td> <td id="body">15:20</td> <td id="body">Draft</td> </tr> <tr> <td id="bodyleft">SU2011</td> <td id="bodyleft">Прага</td> <td id="body">PRG</td> <td id="body">15:21</td> <td id="body">Landed</td> </tr> <tr> <td id="bodyleft">SU2417</td> <td id="bodyleft">Милан</td> <td id="body">MIL</td> <td id="body">15:24</td> <td id="body">Landed</td> </tr> <tr> <td id="bodyleft">SU2137</td> <td id="bodyleft">Стамбул</td> <td id="body">IST</td> <td id="body">15:25</td> <td id="body">Landed</td> </tr> <tr> <td id="bodyleft">SU1359</td> <td id="bodyleft">Саратов</td> <td id="body">RTW</td> <td id="body">15:25</td> <td id="body">Draft</td> </tr> <tr> <td id="bodyleft">SU1321</td> <td id="bodyleft">Мурманск</td> <td id="body">MMK</td> <td id="body">15:27</td> <td id="body">Landed</td> </tr> <tr> <td id="bodyleft">SU1847</td> <td id="bodyleft">Кишинев</td> <td id="body">KIV</td> <td id="body">15:31</td> <td id="body">Landed</td> </tr> <tr> <td id="bodyleft">SU1155</td> <td id="bodyleft">Ростов -на-Дону</td> <td id="body">ROV</td> <td id="body">15:33</td> <td id="body">Landed</td> </tr> </tbody> </div> </table> </table> </div> </article> <footer></footer> 
https://drive.google.com/open?id=1_fbuJiPDua6-5ECOa89AFVKD0H458hPe

    1 answer 1

    The cap of yours and so "sticks" add to it position: relative; z-index: 5; That the table would not overlap.

     body { margin: 0; padding: 0; } .container { position: relative; z-index: 10; } /*---------------*/ div.container { width: 96vw; } @keyframes mymove { 0% { margin-bottom: 0vh; } 100% { margin-bottom: -228vmax; } } html { background-color: #7F7F7F; } footer { font-size: 2.2vw; color: white; background-color: #7F7F7F; clear: left; text-align: center; height: 5vh; } article { padding: 0px; overflow: hidden; background: #7F7F7F; margin: 0 0 0; column-span: all; } .lux { border-collapse: collapse; width: 96vw; } .lux tr { background-color: #595959; } .lux td { border: 3px solid white; padding: 5px; } #headTime { text-align: center; color: white; border: 0px; font-size: 2.2vw; font-weight: normal; background-color: #7F7F7F; } #headLable { text-align: center; color: white; border: 0px; font-size: 2.2vw; background-color: #7F7F7F; } #head { text-align: center; color: white; font-size: 2.2vw; font-: normal; font-style: normal; background-color: #7F7F7F; } #lable { text-align: center; color: white; border: 3px solid white; font-size: 2.5vw; background-color: #F79646; border-collapse: collapse; font-family: sans-serif; width: 19.5vw; } #body { width: 19.5vw; color: white; text-align: center; font-size: 2.2vw; border-top: 2px solid white; } #bodyleft { width: 19vw; color: white; text-align: left; font-size: 2.2vw; } #bodyTime { text-align: center; font-size: 2.2vw; color: #F79646; } #header { position: fixed; z-index: 9999; } #headerMain { margin: 0px auto; z-index: 0; } .tbody { position: relative; animation: mymove 5s infinite; animation-delay: 2s; animation-duration: 90s; animation-timing-function: stepscubic-bezier(0, 0, 1, 1); animation-direction: normal; animation-iteration-count: infinite; } 
     <div class="container"> <article> <table class="lux"> <div id="headerMain"> <div id="header"> <table class="lux"> <thead> <tr> <th id="head" colspan="5">ООА </th> </tr> <tr> <th id="headTime" colspan="1">16:10</th> <th id="headTime" colspan="1"></th> <th id="headLable" colspan="1">ПРИЛЕТ</th> <th id="headTime" colspan="1"></th> <th id="headTime" colspan="1">16.01.2018</th> </tr> <tr> <th id="lable">РЕЙС</th> <th id="lable">ПУНКТ НАЗНАЧЕНИЯ</th> <th id="lable">КОД</th> <th id="lable">РАСПИСАНИЕ</th> <th id="lable">СТАТУС</th> </tr> </thead> </table> </div> </div> <table class="lux"> <div class="tbody"> <tbody> <tr> <td id="bodyleft">SU1123</td> <td id="bodyleft">Сочи</td> <td id="body">AER</td> <td id="body">15:01</td> <td id="body">Landed</td> </tr> <tr> <td id="bodyleft">SU1311</td> <td id="bodyleft">Минеральные воды</td> <td id="body">MRV</td> <td id="body">15:10</td> <td id="body">Landed</td> </tr> <tr> <td id="bodyleft">SU1413</td> <td id="bodyleft">Екатеринбург</td> <td id="body">SVX</td> <td id="body">15:11</td> <td id="body">Landed</td> </tr> <tr> <td id="bodyleft">BT428</td> <td id="bodyleft">Рига</td> <td id="body">RIX</td> <td id="body">15:13</td> <td id="body">Landed</td> </tr> <tr> <td id="bodyleft">SU1003</td> <td id="bodyleft">Калининград</td> <td id="body">KGD</td> <td id="body">15:14</td> <td id="body">Landed</td> </tr> <tr> <td id="bodyleft">SU1463</td> <td id="bodyleft">Новосибирск</td> <td id="body">OVB</td> <td id="body">15:20</td> <td id="body">Draft</td> </tr> <tr> <td id="bodyleft">SU1521</td> <td id="bodyleft">Новый Уренгой</td> <td id="body">NUX</td> <td id="body">15:20</td> <td id="body">Draft</td> </tr> <tr> <td id="bodyleft">SU2011</td> <td id="bodyleft">Прага</td> <td id="body">PRG</td> <td id="body">15:21</td> <td id="body">Landed</td> </tr> <tr> <td id="bodyleft">SU2417</td> <td id="bodyleft">Милан</td> <td id="body">MIL</td> <td id="body">15:24</td> <td id="body">Landed</td> </tr> <tr> <td id="bodyleft">SU2137</td> <td id="bodyleft">Стамбул</td> <td id="body">IST</td> <td id="body">15:25</td> <td id="body">Landed</td> </tr> <tr> <td id="bodyleft">SU1359</td> <td id="bodyleft">Саратов</td> <td id="body">RTW</td> <td id="body">15:25</td> <td id="body">Draft</td> </tr> <tr> <td id="bodyleft">SU1321</td> <td id="bodyleft">Мурманск</td> <td id="body">MMK</td> <td id="body">15:27</td> <td id="body">Landed</td> </tr> <tr> <td id="bodyleft">SU1847</td> <td id="bodyleft">Кишинев</td> <td id="body">KIV</td> <td id="body">15:31</td> <td id="body">Landed</td> </tr> <tr> <td id="bodyleft">SU1155</td> <td id="bodyleft">Ростов -на-Дону</td> <td id="body">ROV</td> <td id="body">15:33</td> <td id="body">Landed</td> </tr> </tbody> </div> </table> </table> </div> </article> <footer></footer>