CSS overflow: ???? and Tables or some other method?

Question

I have a table that is 640px wide seperated in two [TD]'s. The left one is 150px and the right one 490px.

The question is, using CSS or any other method, how do I stop the content from overflowing the size I have set and making the page look like a mess.

I have have tried the css overflow: scroll method and in some cases this works, but not in all. I need something that is going to work everytime. If I could get each TD to scroll if the content is larger that would certainly suffice.

I do not have a link to provide, this is just a general question as I will have many areas on my site that I may need to use something like this.

Thanks

Answer 1

If you're using tables as backbone of you website, then you do it wrong. You should use div elements instead. Tables should be use for tabular data, not for structure.

Sometimes it's quite hard to get fast the look as when used table, but it's not impossible. For 2-row table you can use something like this

    <div id="container">
      <div id="left">
      <div id="right">
      <div class="clr" >
    </div>

CSS:

#container{
  width: 640px;
}
#left{
  width: 150px;
  flot: left; /*if you want them to be next to each other */
  overflow: scroll; /*or hidden?*/
}
#right{
  width: 490px;
  float: left;
  overflow: scroll; 
}
.clr {
  clear: both;
}

Answer 2

I agree with both answers so far - the ideal solution is to re-code your layout without the table, but if you don't have time, wrapping your table cell content in a <div> will do the trick:

HTML

<table>
    <tr>
        <td class="left">
           <div>This is your left content</div>
        </td>
        <td class="right">
           <div>This is your right content</div>
        </td>
    </tr>
</table>

CSS

table {
    width: 640px;   
}

td div {
   overflow: scroll;  
}   

td.left,
td.left div {
    width: 150px;
}   

td.right,
td.right div {
    width: 490px;
} 

The added <div>'s around your content will respect the CSS overflow property and prevent non-breaking content from blowing up your layout.

Answer 3

Since you are using fixed widths, it sounds like you need to set table-layout: fixed on your table element.