css/jquery: Fixed when scrolling horizontally but not vertically

I have a large table with headers as the first column, and a jQuery slider plugin (from https://github.com/keesschepers/jquery-ui-content-slider) to scroll through the table horizontally while keeping the first column fixed.

However, if I try to scroll downwards (vertically) I cannot see the rest of first column (larger than the height of the screen) since it has the fixed property (css). Is there any css or jQuery trick to fix this?

CSS Code:

     table tr td:first-child { position: fixed; } 
 

HTML Code:

      <div id="#content-scroll">
       <table>
       <tr><td></td>...and many more cells</tr>
       ...and many more rows
       </table></div>
 

jQuery Code:

             <script type="text/javascript">
         $(document).ready(function() {
             $("#content-slider").slider({
                 animate: true,
                 change : function (e, ui) {
                     var maxScroll = $("#content-scroll").prop("scrollWidth") -
                         $("#content-scroll").width();
                     $("#content-scroll").animate({
                         scrollLeft : ui.value * (maxScroll / 100)
                     }, 1000);
                 },
                 slide : function (e, ui)
                 {
                     var maxScroll = $("#content-scroll").prop("scrollWidth") -
                         $("#content-scroll").width();
                     $("#content-scroll").prop('scrollLeft' ,ui.value * (maxScroll / 100));
                 }
             });
         });
     </script>
 

---