Translate

Home > July 2016

July 2016

Fixed header and scrollable body

Tuesday, July 12, 2016 Category : 0



<div class="Top1 base">
    <table>
        <tr>
            <td>1
            </td>
            <td>2
            </td>
            <td>3
          ....
        </tr>
    </table>
</div>
<div class="Top2 base">
    <table>
        <tr>
            <td>1
            </td>
            <td>2
            </td>
            <td>3
            </td>
            <td>4
            </td>
            <td>5
            </td>
            <td>6
            </td>
            <td>7
          .....
        </tr>
        <tr>
            <td>1
            </td>
            <td>2
            </td>
            <td>3
            </td>
            <td>4
            </td>
          .....
        </tr>
        <tr>
            <td>1
            </td>
            <td>2
            </td>
            <td>3
            </td>
            <td>4
            </td>
          ...
        </tr>
        <tr>
            <td>1
            </td>
            <td>2
            </td>
            <td>3
            </td>
            <td>4
           ....
        </tr>
        <tr>
            <td>1
            </td>
            <td>2
            </td>
            <td>3
            </td>
            <td>4
            ........
        </tr>
        <tr>
            <td>1
            </td>
            <td>2
            </td>
            <td>3
            </td>
            <td>4
            </td>
            <td>5
           ...........
        </tr>
        <tr>
            <td>1
            </td>
            <td>2
            </td>
            <td>3
            </td>
            <td>4
            </td>
            .....
        </tr>
        <tr>
            <td>1
            </td>
            <td>2
            </td>
            <td>3
            </td>
            <td>4
            </td>
            <td>5
            </td>
            ......
        </tr>
    </table>
</div>




.base{
    width:250px;
    overflow:scroll;
    max-height:100px;
}

.Top1
{
    overflow:hidden;
    width: 230px;
 }


$('.Top2').bind('scroll', function(){
  $(".Top1").scrollLeft($(this).scrollLeft());
});




Source : http://jsfiddle.net/A79e2/10/

Powered by Blogger.