Question

I’m trying to realize an table, which spans over the full browser width.

This table contains 3 table-cells.
The first and the last cell is “fixed”. This means: it has to be visible all the time: the first cell at the left border of the browser window, the last cell on the right border of the browser window.

The 2nd cell (at the middle) contains one more table with many cells and different length/width. Let’s call this table “content-table”

so it could looks like this;

[first cell] | [content1|content2|content3|content4] | [last cell]

The problem is: the “content-table” could contain lot of content. Because the “first cell” and the “last cell” have to be visible all the time, the oversized “contend-table” should partially hidden.

Finally, I need something like “overflow:hidden”, but this doen’t work at table-cells. (it look like it does not work?)

I have an small jsfiddl to show the problem: http://jsfiddle.net/thirtydot/YRgwB/3/

I’m working at this problem since yesterday – without any idea!

Hope for any kind of help here.

Answer 1

See: http://jsfiddle.net/thirtydot/YRgwB/6/

• I added width:100%; table-layout:fixed; to your outer table.
• I wrapped a div with overflow: hidden around your “wide table”.
• This works in all modern browsers.

<table border="1" style="width:100%; table-layout:fixed;">
    <tr>
        <td>first cell</td>
        <td>
            <div style="overflow:hidden; border:1px solid red;">
                <table>
                    <tr>
                        <td style="min-width:90px;">lot</td>
                        <td style="min-width:90px;">of</td>
                        <td style="min-width:90px;">content</td>
                    </tr>
                </table>
            </div>
        </td>
        <td>last cell</td>
    </tr>
<table>