Overflow in table cells

Question

I need to create a chat layout that uses all the available space and scales nicely, but has few fixed sizes.

Here's the structure:

<table style="width: 100%; height: 100%">
    <tr>
        <td></td>
        <td style="width: 200px; background: red;"></td>
    </tr>
    <tr>
        <td style="height: 100px; background: blue"></td>
        <td></td>
    </tr>
</table>

However, I want to place a lot of content in the first table cell and I want it to scroll, so it won't expand the table.

Is it possible to make it overflow properly, without having a fixed height for the cell? Simply adding overflow: auto doesn't seem to work.

PS. I hate tables, but can't figure out a very clean and cross-browser way to do a layout like this with divs and css. If someone can come up with one, I'll gladly use it.

Pranay Rana · Accepted Answer · 2010-06-07 09:08:20Z

1

One way to achieve is use put all content in div element and set div overflow property to auto

<table style="width: 100%; height: 100%">
    <tr>
        <td>
         <div style="overflow:auto;">
              //your contain 
          </div>
        </td>
        <td style="width: 200px; background: red;"></td>
    </tr>
    <tr>
        <td style="height: 100px; background: blue"></td>
        <td></td>
    </tr>
</table>

answered Jun 7, 2010 at 9:08

Pranay Rana

177k37 gold badges244 silver badges266 bronze badges

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

6 Comments

Removed_account Over a year ago

Tried this on firefox and chrome, doesn't seem to work. The table still grows when I add a lot of content and the scroll doesn't appear.

Pranay Rana Over a year ago

provide width and height to div

Removed_account Over a year ago

Using height: 100% on the container div seems to work fine in chrome, but the problem persists in firefox.

Pranay Rana Over a year ago

use min-height for the div like div{min-height:300px;height:auto!important;height:300px;}

Removed_account Over a year ago

Still doesn't seem to work for firefox. I can't have fixed height for the cell, since I want the table to fill all the available space no matter where I place it and scale properly if the container's size changes.

|

Phil.Wheeler · Accepted Answer · 2010-06-07 09:15:41Z

1

An alternative if your content shouldn't actually even be in a table is to use a CSS grid system, such as 960.gs or Nicole Sullivan's "OO-CSS".

You'd want to divide a container into however many grids you needed and these lend themselves much better to CSS decoration. They're much more flexible and simple to use.

answered Jun 7, 2010 at 9:15

Phil.Wheeler

16.9k10 gold badges103 silver badges157 bronze badges

Collectives™ on Stack Overflow

Overflow in table cells

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related