Question

在我的网站上，我有一个包含两个表格单元格的CSS表格。一个是400px宽，我希望另一个占据页面的其余部分。我怎么做？我已尝试将宽度100％应用于它，但这对chrome不起作用，而width：auto根本不起作用。

.wrapper{
    display: table;
    width: 100vw;
    max-width: 100vw;
}
[...]
.sidebar{
    display: table-cell;
    border-right: 1px solid #707070;
    width: 400px;
}
[...]
.content{
    display: table-cell;
    width: 100%;
}

HTML：

<div class="wrapper">
    <div class="sidebar">
        <!-- Stuff -->
    </div>
    <div class="content">
        <!-- Titles and text, all that usual blog stuff. Oh, and a big, wide header. -->
    </div>
</div>

Answer 1

将您的包装器设置为display：table而不显示：table-cell，否则包装器将获得一个自动宽度的匿名表包装器（收缩以适合表）。

.wrapper{
    display: table;
    width: 100%;
    table-layout:fixed;
}

我不会使用vw作为宽度，因为它包含滚动条，并且当内容低于折叠时会导致水平滚动条。

Answer 2

将style="width:100%"应用于table元素，在第一个单元格上保持400px限制。第二个单元格将扩展以符合表格的宽度。

Answer 3

表格应自动缩放到全宽（假设宽度为100％），即使一列固定而另一列灵活。我抛出了一个小测试/示例@ http://jsfiddle.net/41uc6Lsq/1/

<table width="100%">
    <thead>
        <tr>
            <th width="20px">Col 1</th>
            <th>Col 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </tbody>
</table>

<table width="100%">
    <tbody>
        <tr>
            <td width="20px">1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </tbody>
</table>

编辑：刚看到你的CSS编辑 - 你也可以发布HTML吗？

最大化CSS表格单元格宽度

3 个答案: