Question

我很难根据父母TD而不是根据DIV的内容来制作DIV容器和调整大小。这就是我想要实现的目标：

父表格应始终适合屏幕，因此宽度设置为100％
左列是固定大小以显示菜单
右栏（内容）应根据浏览器宽度
在内容TD中，我使用DIV标记滚动内容表（溢出自动）

我期望DIV滚动内容（水平）并在父TD上调整其宽度。但DIV扩展并使用IE滚动条而不是DIV滚动条。

这是我到目前为止所尝试的内容：

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

也许可以使用仅使用DIV标签的布局来实现。但由于给定的母版页布局和asp：GridView，我无法改变它。它还应该适用于旧的IE6。

有人可以帮帮我吗？

更新

可以自己解决问题。如果有人有兴趣，这是解决方案：将CSS样式table-layout:fixed;添加到根表。

Answer 1

宽度=“100％”不应该在TD条目而不是子div和grand-child表上吗？

喜欢？

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

使DIV容器适合父TD

更新

1 个答案: