Question

我在css中遇到了一些奇怪的表格。布局相当简单，左侧是固定宽度的导航栏，右侧是内容。当内容包括宽度为100％的桌子时，桌子最终会被推下，直到它有足够的空间占据屏幕的整个宽度（而不仅仅是导航栏右侧的区域）。如果我从表的css中删除width = 100％，那么它看起来很好，但显然表不会增长以填充div的空间。问题是我希望表格随窗口增长和缩小但仍然保持在div的范围内。

感谢。

这是一个简单的例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Test</title>

        <style type="text/css">
            #content {
                padding-right:20px;
                background:white;
                overflow:hidden;
                margin:20px;
            }
            #content .column {
                position:relative;
                padding-bottom: 20010px;  
                margin-bottom: -20000px; 
            }
            #center {
                width:100%;
                padding-top:15px;
            }
            body {
                min-width:700px;
            }
            #left {
                width: 330px;
                padding: 0 10px;
                padding-top:10px;
                float:left;
            }
            .tableData {
                width:100%;
            }
        </style>

    </head>
    <body>

        <div id="content">
            <div class="column" id="left">
                <div>
                    Some text goes in here<br/>
                    some more text<br/>
                    some more text<br/>
                    some more text<br/>
                    some more text<br/>
                    some more text<br/>
                </div>
            </div>

            <div class="column" id="center">
                Some text at the top;
                <hr/>
                <table class="tableData">
                    <thead>
                        <tr><th>A</th><th>B</th><th>C</th></tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>A1 A1 A1 A1</td>
                            <td>B1 B1 B1 B1</td>
                            <td>C1 C1 C1 C1 C</td>
                        </tr>
                        <tr>
                            <td>A2 A2 A2 A2 </td>
                            <td>B2 B2 B2 B2 </td>
                            <td>C2 C2 C2 C2</td>
                        </tr>
                        <tr>
                            <td>A3 A3 A3 A3 A3 </td>
                            <td>B3 B3 B3 B3 B3 </td>
                            <td>C3 C3 C3 C3 C3</td>
                        </tr>
                        <tr>
                            <td>A4 A4 A4 A4 A4</td>
                            <td>B4 B4 B4 B4 B4</td>
                            <td>C4 C4 C4 C4 C4</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </body>
</html>

Answer 1

将中间列上的左侧填充设置为等于侧边栏的宽度。

这有意义吗？

#center {
  padding-left:350px
}

Answer 2

尝试将此用于#center：

#center {
   margin-left:330px;
   /*width:100%;*/
   padding-top:15px;
}

宽度100％时包裹到下一行的表格

2 个答案: