CODEWITHSUNDEEP
htmlhtml-table
Thomas
Thomas

Reputation: 11

Making DIV container fitting into parent TD

I'm hardly trying to make a DIV container fitting and resizing according to the parent TD and not according to the content of the DIV. Here's what I want to achieve:

I've expected the DIV to scroll the content (horizontally) and resize its width upon the parent TD. But the DIV extends and the IE scrollbars are used instead of DIV scrollbars.

Here is what I've tried so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
    <table border="1" width="100%">
        <colgroup>
            <col width="200px" />
            <col width="*" />
        </colgroup>
        <tr>
            <td>
                <div style="width:100px;">
                    Left header
                </div>
            </td>
            <td>
                right header
            </td>
        </tr>
        <tr>
            <td>
                Menu
            </td>
            <td>
                <!-- this DIV should scroll! -->
                <div style="overflow:auto; width:100%;">
                    <table border="1" width="100%">
                        <tr>
                            <td>
                                SOME_LONG_COLUMN_VALUES_SOME_LONG_COLUMN_VALUES
                            </td>
                            <td>
                                SOME_LONG_COLUMN_VALUES_SOME_LONG_COLUMN_VALUES
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

It might be possible to do so with a layout using DIV tags only. But due to the given master page layout and the asp:GridView, I cannot change that. Also it should still work with old IE6.

Can somebody help me please?

Update

Could solve the problem myself. If someone is interested, here's the solution: added the CSS style table-layout:fixed; to the root table.

Upvotes: 1

Views: 4018

Answers (1)

Adam Cooper
Adam Cooper

Reputation: 11

Shouldn't the width="100%" be on the TD entry instead of the child div and grand-child table?

Like?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<body> 
<table border="1" width="100%"> 
    <colgroup> 
        <col width="200px" /> 
        <col width="*" /> 
    </colgroup> 
    <tr> 
        <td> 
            <div style="width:100px;"> 
                Left header 
            </div> 
        </td> 
        <td> 
            right header 
        </td> 
    </tr> 
    <tr> 
        <td> 
            Menu 
        </td> 
        <td style="width:100%;> 
            <!-- this DIV should scroll! --> 
            <div style="overflow:auto; width:100%;"> 
                <table border="1" width="100%"> 
                    <tr> 
                        <td> 
                            SOME_LONG_COLUMN_VALUES_SOME_LONG_COLUMN_VALUES 
                        </td> 
                        <td> 
                            SOME_LONG_COLUMN_VALUES_SOME_LONG_COLUMN_VALUES 
                        </td> 
                    </tr> 
                </table> 
            </div> 
        </td> 
    </tr> 
</table>

Upvotes: 1

Related Questions