Html table extending off the screen

问题

I have a table, which extends off the screen to the right (it has fixed with and this width is larger than screen width). Browser automatically creates scroll bar at the bottom. How can I instruct browser, while displaying this table in "invisible" area to the right, not to create a scroll bar? The purpose of this exercise that this table will be scrolled left using Javascript, showing its contents to the right which is initially off the screen.

If I set "overflow:hidden" for the "body", all other content becomes unscrollable in case it does not fit to the screen (e.g. in 1024 browser, as content is optimized for 1280). I need only this table (which is inside two DIVs) not to create browser scroll bar...

Code looks like the following way

<div style="position:relative;overflow:hidden;width:1500px">
    <div style="float:left">
        <table style="table-layout:fixed;width:1500px">
            <tr>
                <td style="width:300px">
                    aaa
                </td>
                <td style="width:300px">
                    bbb
                </td>
                <td style="width:300px">
                    ccc
                </td>
                <td style="width:300px">
                    ddd
                </td>
                <td style="width:300px">
                    eee
                </td>
            </tr>
        </table>
    </div>
</div>

回答1:

Try this

<body style="overflow-x:hidden;">

or use any CSS class to add this property into your body tag.

回答2:

Add the following CSS rule:

body
{
  overflow-x:hidden;
}

EDIT: After seeing your comments, and that the table is within a div I suggest the following. Lets say your markup is:

<div class="tablecontainer">
  <table />
</div>

Use the following CSS rule:

div.tablecontainer
{
  overflow-x:hidden;
}

来源：https://stackoverflow.com/questions/11117927/html-table-extending-off-the-screen

标签

html

html-table

width