Html table extending off the screen

Question

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>

Answer 1

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;
}