Odtnhj

Relevant jsfiddle: http://jsfiddle.net/theanine/0d8vbrnt/13/

img.owl 
 width: 100px;

img.owl:hover 
 -webkit-transform: scale(2);
 -moz-transform: scale(2);
 -o-transform: scale(2);
 transform: scale(2);
 transition: all 1s;
 -webkit-transition: all 1s;

table 
 margin-left:auto;
 margin-right:auto;

table thead
 display:block;
 height:48px;
 overflow:auto;

table tbody
 display:block;
 height:calc(99.5vh - 87px);
 height:calc((var(--vh, 1vh) * 100) - 91px);
 overflow-y: scroll;

Using z-index didn't seem to help. However removing "overflow-y: scroll" did work. The problem is I need to keep this because the goal is to have header/footer rows (and the page itself) that remain static as the tbody is scrolled, and images that scale when moused over (and don't get blocked by the header/footer rows).

You can use position fixed

table thead 
 display:block;
 height:48px;
 overflow:hidden;
 position: fixed;
 top: 0;
 width: 100%;
 background-color: white 


table tbody
 display:block;
 height:calc(99.5vh - 87px);
 height:calc((var(--vh, 1vh) * 100) - 91px);

I think what you are looking for is

img.owl 
 width: 100px;

img.owl:hover 
 -webkit-transform: scale(2);
 -moz-transform: scale(2);
 -o-transform: scale(2);
 transform: scale(2);
 transition: all 1s;
 -webkit-transition: all 1s;

table 
 margin-left:auto;
 margin-right:auto;

table thead
 margin: 0 auto;
 width: 300px;
 display:block;
 height:28px;
 overflow:auto;

table tbody
 display:block;
 height:calc(99.5vh - 87px);
 height:calc((var(--vh, 1vh) * 100) - 91px);
 overflow-y: scroll;
 padding: 35px 0;

tr
 display: flex;
 justify-content: center;

tbody::-webkit-scrollbar 
 display: none; 

I just made a few changes in your code, and with the help of a little bit of flexbox I think I got it! let me know if that help you