make table size not moving when auto scroll

My html:

<table id="myTbl">
          <thead>
            <tr style="background-color:green; color:white; font-weight:bold">
              <th style="text-align:left; width:15em">row1</th>
              <th style="text-align:left; width:10em">row2</th>
              <th style="text-align:left; width:10em">row3</th>
            </tr>
          </thead>
        <tbody>
          <tr style="background-color:black ;" >
            <td style="text-align:left; width:15em; color:white">A</td>
            <td style="text-align:left; width:10em; color:yellow">B</td>
            <td style="text-align:left; width:10em; color:white">C</td>
          </tr>
          <tr style="background-color:grey ;" >
            <td style="text-align:left; width:15em; color:white">D</td>
            <td style="text-align:left; width:10em; color:yellow">E</td>
            <td style="text-align:left; width:10em; color:white">F</td>
         </tr>
         <tr style="background-color:black ;" >
            <td style="text-align:left; width:15em; color:white">G</td>
            <td style="text-align:left; width:10em; color:yellow">H</td>
            <td style="text-align:left; width:10em; color:white">I</td> 
         </tr>
         </tbody>
     </table>

My js code to make the table scrolling:

$.fn.infiniteScrollUp=function(){
        var self=this,kids=self.children()
    kids.slice(3).hide()
        setInterval(function(){
     
            kids.filter(':hidden').eq(0).fadeIn()
            kids.eq(0).fadeOut(function(){
                $(this).appendTo(self)
                kids=self.children()
            })
        },1000)
        return this
    }
    $(function(){
        $('tbody').infiniteScrollUp()
    })

How to make my table size not change when auto scrolling? I tried css table-layout: fixed but not working, please help. Full code: https://jsfiddle.net/cd9qz053/1/