how to obtain proper alignment of tables on top of each other with horizontal scrollbar at bottom


Tags: html,css

Problem :

I want to know how to obtain proper alignment of tables on top of each other with horizontal scrollbar at bottom.

The demo HTML code is:

<div class="cntnr">
<div class="tabonecntnr">
    <table class="wd100 tabone">
        <tbody>
            <tr>
                <td>TABLENAME</td>
                <td>lorem ipsum</td>
                <td>ABC</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="tabtwocntnr">
    <table class="wd100 tabtwo">
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
            <th>Header 5</th>
            <th>Header 6</th>
            <th>Header 7</th>
            <th>Header 8</th>
            <th>Header 9</th>
            <th>Header 10</th>
            <th>Header 11</th>
            <th>Header 12</th>
            <th>Header 13</th>
            <th>Header 14</th>
            <th>Header 15</th>
            <th>Header 16</th>
            <th>Header 17</th>
            <th>Header 18</th>
            <th>Header 19</th>
            <th>Header 20</th>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
            <th>Header 5</th>
            <th>Header 6</th>
            <th>Header 7</th>
            <th>Header 8</th>
            <th>Header 9</th>
            <th>Header 10</th>
            <th>Header 11</th>
            <th>Header 12</th>
            <th>Header 13</th>
            <th>Header 14</th>
            <th>Header 15</th>
            <th>Header 16</th>
            <th>Header 17</th>
            <th>Header 18</th>
            <th>Header 19</th>
            <th>Header 20</th>

        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    </table>
</div>

</div>

The corresponding css is:

.wd100{
    width:100%;
}

.cntnr{
    overflow-x:auto;
    width: 100%;
    border: 1px solid black;
}
.bgred{
    background: red;
}
.tabone,.tabtwo{
    border-collapse: collapse;

}
.tabone td{
    background: red;
}
.tabonecntnr,.tabtwocntnr{
    width:100%;
    overflow: hidden;
}

As we can see the second table is not displayed completely.

I have tried applying position:absolute; and table-layout:fixed; properties to the inner divs and tables respectively but still could not get the correct result.

I want to know where I am going wrong.

Please contribute...



Solution :

demo of exactly what you want

To do : As chadocat suggested remove overflow: hidden; from .tabonecntnr

Then, to cover the top-table to full width as below table, do :

.wd100 {
    min-width:1000%; /* hack to give full width*/
    overflow:hidden; /*hide when the content is over */
}

why need hack??? because...table or div would take up only 100% of the width....you need to cover, even the overflow which is extended-width....greater that 100% width!!!


    CSS Howto..

    how to create a vertical menu in html/css [closed]

    How to deploy a jekyll site locally with css, js and background images included?

    How can I target and except for the first and last ?

    how to change “product details” text to my own text in Virtuemart?

    How to have background color outside of radius border in a tbody in chrome?

    How bad is to store all background images in CSS?

    How to exclude some text from browser zoom

    How to center text in lists?

    How can I apply a link over this entire div?

    How to achieve this CSS layout - Answered [closed]

    HTML/CSS: flip3d how to do a 360 degrees with 4 pictures

    how do I select in css so the items appears in hover state In entire page(mega menu)

    How to position a button to be always a certain distance from the screen in css? [closed]

    Hide all div element but show first two

    how to give css only the 1st label span?

    How to debug less css variables