最大化 CSS 表格单元格宽度答案

【问题标题】：Maximize CSS table-cell width最大化 CSS 表格单元格宽度
【发布时间】：2018-01-13 04:18:34
【问题描述】：

在我的网站上，我有一个带有两个表格单元格的 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>

【问题讨论】：

标签： html css width css-tables

【解决方案1】：

将您的包装器设置为 display:table 而不是 display:table-cell，否则包装器会以自动宽度（缩小以适合表格）获取匿名表格包装器。

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

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

【讨论】：

糟糕，包装器中的表格单元格是错字，抱歉。 width: 100% 似乎是解决方案，谢谢！ :D

【解决方案2】：

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

【讨论】：

【解决方案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 吗？

【讨论】：