JSFiddle - React, Tailwind, and code Playground

by jrablade

HTML

<script src="http://my-e-logbook.com/js/jquery.horizontal.scroll.js"></script>
<ul id="horiz_container_outer">
        <li id="horiz_container_inner">
            <ul id="horiz_container">
                <li>
                    <table width="2000px">
                        <tr>
                            <td><input type="text" /></td>
                            <td><input type="text" /></td>
                            <td><input type="text" /></td>
                            <td><input type="text" /></td>
                            <td><input type="text" /></td>
                            <td><input type="text" /></td>
                            <td><input type="text" /></td>
                            <td><input type="text" /></td>
                            <td><input type="text" /></td>
                            <td><input type="text" /></td>
                            <td><input type="text" /></td>
                            <td><input type="text" /></td>
                            <td><input type="text" /></td>
                            <td><input type="text" /></td>
                            <td><input type="text" /></td>
                            <td><input type="text" /></td>
                            <td><input type="text" /></td>
                            <td><input type="text" /></td>
                            <td><input type="text" /></td>
                        </tr>
                    </table>
                </li>
            </ul>
    </li>
</ul>
    <div id="scrollbar">
        <a id="left_scroll" class="mouseover_left" href="#"></a>
        <div id="track">
             <div id="dragBar"></div>
        </div>
        <a id="right_scroll" class="mouseover_right" href="#"></a></div>
    </div>

CSS

#horiz_container_outer
{
    width:400px;
    overflow-x:hidden;
    overflow-y:hidden;
    height:100px;
    position:relative;
    border:1px solid #000000;
    padding:0px;
    margin:0px;

}

#horiz_container
{
    width:3000px;
    margin:0px;
    padding:0px;
    height:80px;
}

#horiz_container ul
{
    margin:0px; padding:0px;
    float:left;
}

#horiz_container_inner
{
    padding:5px;
    padding-left:0px;
}

#horiz_container li
{
    list-style:none;
    display: inline-table;
    margin:0px;
}

#horiz_container li img
{
    padding:0px;
    margin:0px;
}




/**************************************************
*
*    SCROLLING STYLES
*
**************************************************/

#scrollbar 
{ 
    position:relative; 
     height:12px;
    display:block;
    font-size:1px;
    top:-5px;
    margin:0px auto;
    width:850px;
    
    /* POUR IE */
    
    *top:-20px;
    *margin:0px auto;
    *left:20px;
    *width:870px;
}

#track 
{ 
    position:absolute; left:-5px; top:0;
    width:855px; height:12px; 
    background: #676767;
    
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    behavior: url(../css/ie-css3.htc);
    
    /* Pour IE */
    *width:875px;
}

#dragBar 
{
    position:absolute; left:0px; top:0px;
    width:20px; height:10px; 
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.39, rgb(229,229,229)),
    color-stop(0.7, rgb(245,245,245))
);
background-image: -moz-linear-gradient(
    center bottom,
    rgb(229,229,229) 39%,
    rgb(245,245,245) 70%
);

}  
  
#left_scroll
{ 
    position:absolute; 
    border-color: transparent gray transparent transparent;
    border-style: solid;
    border-width: 5px;
    width: 0;
    height: 0px;
    cursor:pointer;
    top:1px;
    left:-20px;
}  

#right_scroll 
{ 
    position:absolute; 
    right:-20px; 
   ...

JavaScript

$('#horiz_container_outer').horizontalScroll();