html table should overflow

I have a table with two columns. The first (which contains a menu) should have a fixed width, while the second (containing some page content) can vary in width. The table should overflow the window (which it doesn't by default), because ot开发者_如何转开发herwise the browser reduces the width of the menu column if the content is very broad. But I cannot define a fixed width for the table (causing it to overflow) because I don't know the width of the content.

Overflow:scroll

does not seem to work with tables. I would be thankful for workarounds/solutions.

<table class="rootTableContent">
<tr>
    <td id="rootTableMenu">             
    </td>
    <td id="rootTableContent">
    </td>
</tr>

The solution to this problem is to use proper CSS (Divs/Spans, etc) to layout your website as opposed to tables. I'm all for using tables to display tabular data and you'll see me arguing for them in places that they're valid, but this is not one of them.

This is easily done with something like this:

<div style="float:left; width: 150px">
   Navigation Code Here
</div>
<div style="float: left">
   Other Content Here
</div>
<div style="clear:both"></div>

Obviously, I'm oversimplifying this solution, you're going to have more specific code to deal with your layout (need more detail to help more specifically) But, it's important to use the right tools for the job.

As others have stated, please don't use <table> layouts. It's old, clunky, and confuses screen readers and other accessibility software.

If you absolutely insist on using your method, you can try this:

Live Demo

<style type="text/css">
div.wrap {
    overflow-y: auto;
    width: 75%;
}
div.wrap table {
    border: 1px solid #000;
    width: 100%;
}
div.wrap table td {  
    padding: 20px;
}
</style>

<div class="wrap">
  <table class="rootTableContent">
    <tr>
      <td id="rootTableMenu">rootTableMenu</td>
      <td id="rootTableContent">rootTableContent</td>
    </tr>
  </table>
</div>