html table should overflow

Question

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 otherwise 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>

Your going to need to provide a bit more code than that. I'm not sure exactly what issue you're facing. Maybe post some code over on www.jsfiddle.net — Dutchie432
– Dutchie432, Commented Mar 29, 2011 at 16:44
the table should overflow what? If you don't give the table a fixed width, then it will stretch to fit it's container. That's just how it works. I suggest diagramming what you want your page's behavior to be and we can then suggest the proper HTML and CSS to accomplish that. (the answer is probably not a TAble) — DA.
– DA., Commented Mar 29, 2011 at 16:48
please please please don't use tables for layout. think about the children! — corroded
– corroded, Commented Mar 29, 2011 at 16:58
This can be easily achieved with divs. Please don't use a tables for a site layout — Linens
– Linens, Commented Mar 29, 2011 at 17:00

bpeterson76 · Accepted Answer · 2011-03-29 17:01:43Z

1

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.

answered Mar 29, 2011 at 17:01

bpeterson76

12.9k6 gold badges51 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AGuyCalledGerald Over a year ago

What do you mean by "easily"? It takes ages to change the whole layout and this is nearly impossible to accomplish with limited time.

bpeterson76 Over a year ago

@Jan-Frederik Carl, I disagree. It only takes extra time until you're comfortable with proper CSS layout. I was similarly dragged there kicking and screaming. But for comparison purposes, I can have a complete site cutup and assembled from a .psd these days in fully compliant CSS in under 3 hours. As basic as your keeping your sample code, I'd expect this to take no more than 20-30 minutes to have assembled in HTML and CSS, start to finish.

jrn.ak · Accepted Answer · 2011-03-29 17:05:53Z

0

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>

answered Mar 29, 2011 at 17:05

jrn.ak

36.8k7 gold badges37 silver badges45 bronze badges

1 Comment

AGuyCalledGerald Over a year ago

I have to mention, that I have not built this layout!

Collectives™ on Stack Overflow

html table should overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related