CODEWITHSUNDEEP
htmlcsshtml-table
user1451890
user1451890

Reputation: 1095

Using two tables to simulate a fixed header row, but header appears broken when scrolled left and right

I can't seem to figure out as to why my div/table column lines would appear broken if the body of the table was scrolled left and right. Their also appears to be some over run to the right of my html data table, how can I remedy these two problems. I've attached a pic of the problem:

enter image description here

Here is the fiddle - http://jsfiddle.net/EPq69/

Here is the HTML markup:

<!DOCTYPE html>

<html>

<head>

<style type="text/css">
#data_container {
    border: 1px solid blue;
    width: 100%;
}
#data_wrapper {
    width: 100%;
    border-right:0px;
    height: 150px;
    overflow-x: scroll;
}
#data_headers, #data_body {
    width: 100%;
    padding: 0px;
    border-spacing: 0px;
    table-layout: fixed;
}
#data_headers {

}
#data_body {

}
#data_headers td, #data_body td {
    border-right: 1px solid green;
    width: 150px;
}
#data_headers td {
    border-bottom: 1px solid black;
}
</style>

</head>

<body>

    <div id="data_container">

        <table id="data_headers">
            <tr>
                <td>Header1</td>
                <td>Header2</td>
                <td>Header3</td>
                <td>Header4</td>
                <td>Header5</td>
                <td>Header6</td>
                <td>Header7</td>
                <td>Header8</td>
                <td>Header9</td>
                <td>Header10</td>
            </tr>
        </table>
        <div id="data_wrapper">
        <table id="data_body">
            <tr>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
            </tr>
            <tr>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
            </tr>
            <tr>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
            </tr>
            <tr>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
            </tr>
            <tr>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
            </tr>
            <tr>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
            </tr>
            <tr>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
            </tr>
            <tr>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
            </tr>
            <tr>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
            </tr>
            <tr>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
                <td>Some content</td>
            </tr>

        </table>

    </div>
</div>
</body>

</html>

Upvotes: 1

Views: 669

Answers (1)

Huangism
Huangism

Reputation: 16448

Put the overflow-x on the container. If you have the overflow-x on one of the tables then only that table will be scrolled and the other table will not be scrolling which is why you get the offset. If you put it on the container, both can be scrolled at the same time

#data_container {
    border: 1px solid blue;
    width: 100%;
     overflow-x: scroll;
}
#data_wrapper {
    width: 100%;
    border-right:0px;
    height: 150px;
}

http://jsfiddle.net/EPq69/1/

Upvotes: 2

Related Questions