Table Overflow Fixed Horizontal Scrollbar

by Alireza Safian

HTML

<div class='vwpBody'>
    <div class='vwp-body-container'>
        <div class='header'>header Content</div>
        <div class="content">
            <table>
                <tbody>
                    <tr>
                        <td class="headcol">
                            <div>
                                 <h1>Title</h1> 
                                 <h2>Some sub-title</h2> 
                            </div>
                            <ol>
                                <li>
                                    <div>
                                         <h3>Item 1</h3> 
                                         <h3>Additional Information</h3> 
                                    </div>
                                </li>
                                <li>
                                    <div>
                                         <h3>Item 2</h3> 
                                         <h3>Additional Information</h3> 
                                    </div>
                                </li>
                            </ol>
                            <div class="headcol-detail">
                                <div>more details</div>
                            </div>
                        </td>
                        <td style="background-color:red;width:40px;">cell 1</td>
                        <td style="background-color:red;width:40px;">cell 2</td>
                        <td style="background-color:red;width:40px;">cell 3</td>
                        <td style="background-color:red;width:40px;">cell 4</td>
                        <td style="background-color:red;width:40px;">cell 5</td>
                        <td style="background-color:red;width:40px;">cell 6</td>
                        <td style="background-color:red;width:40px;">cell 7</td>
                        <td style="background-color:red;width:40px;">cell 8</td>
                        <td style="background-color:red;width:40px;">cell 9</td>
           ...

CSS

.vwpBody {
    height:100px;
}
.vwp-body-container {
}
.header {
    position:fixed;
    top:0;
    right:0;
    left:0;
    height:41px;
    background-color:red;
    z-index:10;
}
.footer {
    position:fixed;
    height:41px;
    right:0;
    bottom:0;
    left:0;
    background-color:red;
    z-index:10;
}
.content {
    width: 600px;
    overflow-x:hidden;
    margin: 41px 0;
}
.headcol {
    position: relative;
    background-color:white;
}
.bottomScroll {
    position:fixed;
    bottom:41px;
    overflow-x:scroll;
}
.headcol-detail {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    left: 100%;
    height: 100%;
    width: 100%;
    background-color:green;
}
.headcol > div:first-child {
    padding: 10px;
    white-space: nowrap;
    border-width: 3px 3px 3px 3px;
    border-style: solid;
    border-color: gray;
}
.content tr::before {
    content:'';
    display: block;
}
.content td:first-child {
    position: absolute;
}
.headcol > ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: li 0;
    overflow-y: auto;
}
.headcol > ol > li {
    position: relative;
    padding: 10px;
    border-width: 0 3px 3px 3px;
    border-style: solid;
    border-color: gray;
}
.headcol > ol > li:before {
    display: inline-block;
    margin-right: 5px;
    margin-left: 5px;
    content: counter(li);
    counter-increment: li;
    vertical-align: middle;
}
.headcol > ol > li > div {
    display: inline-block;
    /* Aligning this to the middle so the :before (number) can also be aligned middle */
    vertical-align: middle;
    white-space: nowrap;
}
h1 {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 100%;
    font-stretch: semi-condensed;
    margin: 0;
    padding: 0;
}
h2 {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 75%;
    font-weight: lighter;
    margin: 0;
    padding: 0;
}
h3 {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 75%;
    font-weight: normal;
    margin: 0;
   ...

JavaScript

$('td > *:not(div:first-child)').hide();

$('td > div:first-child').click(function () {
    $(this).siblings().toggle();
    $('.overlay').toggle();

    // Adjust the minimum height for the ordered list to ensure that 
    // there is sufficient detail space if there are too few list items
    if ($(this).siblings('ol').css('min-height') == '0px') {
        $(this).siblings('ol').css('min-height', '200px');
        $(this).parent().css('z-index', '2');
    } else {
        $(this).siblings('ol').css('min-height', 0);
        $(this).parent().css('z-index', '');
    }
    var tr = $(this).closest('tr');
    tr.height($('td:first', tr).height());
});

$('#myButton').click(function () {
    $('.content').width('900px');
    updateDetailWidths();
});

$('.content').bind('resize', function () {
    updateDetailWidths();
});

$(document).ready(updateDetailWidths());

function updateDetailWidths() {
    var mw = 0;
    $('.content td:first-child')
        .each(function () {
        mw = Math.max(mw, $(this).width());
        $(this).parent().height($(this).height());
    })
        .width(mw);
    $('<style>.content tr::before{width:' + mw + 'px}</style>').appendTo('head');
    $('.headcol-detail').width($('.content').innerWidth() - mw);
}