显示：表格 - 第 1 列已设置宽度，第 2 列适合内容，第 3 列已设置宽度，第 4 列占用剩余部分

Question

我可能遗漏了一些明显的东西，但我无法弄清楚。

我有一个占其容器宽度 100% 的表格。第一列和第三列具有设定的宽度。我希望第二列适合其内容（理想情况下具有最大宽度），第四列占用剩余空间。

第三个和第四个实际上是输入框，所以我不关心这个例子中的文本是否换行。 （我在这里使用了文字，因为它更容易看到发生了什么。根据本地测试，我认为这没有什么区别。）

小提琴：http://jsfiddle.net/vgrdLp32/

.table-container {
    display: table;
    table-layout: fixed;
    width: 100%;
    margin-top: 30px;
}
.table-row {
    display: table-row;
}
.table-cell {
    display: table-cell;
    padding: 2px;
    border-bottom: 2px solid rgba(255, 102, 102, .2);
}
.col1 {
    width: 10px;
    background-color: rgba(255, 51, 153, .2);
}
.col2 {
    width: auto; /* ????? */
    background-color: rgba(51, 102, 255, .2);
}
.col3 {
    width: 135px;
    background-color: rgba(153, 102, 255, .2);
}
.col4 {
    background-color: rgba(204, 0, 204, .2);
}
* {
    font-family: 'Ubuntu', Arial;
}

<link  href="http://fonts.googleapis.com/css?family=Ubuntu:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css" >
<div class="table-container">
    <div class="table-row">
        <div class="table-cell col1"></div>
        <div class="table-cell col2">plz autosize me!</div>
        <div class="table-cell col3">i have a set width</div>
        <div class="table-cell col4">make me take up the rest</div>
    </div>
    <div class="table-row">
        <div class="table-cell col1"></div>
        <div class="table-cell col2">i hope</div>
        <div class="table-cell col3">that i will never</div>
        <div class="table-cell col4">let you down</div>
    </div>
    <div class="table-row">
        <div class="table-cell col1"></div>
        <div class="table-cell col2">i know</div>
        <div class="table-cell col3">that this</div>
        <div class="table-cell col4">could be more than</div>
    </div>
    <div class="table-row">
        <div class="table-cell col1"></div>
        <div class="table-cell col2">just flashing</div>
        <div class="table-cell col3">lights and sounds</div>
        <div class="table-cell col4">can we pick you off the ground</div>
    </div>
</div>

Answer 1

将第四列设置为width: 100%，这样它会将所有非宽度列压缩到它们的内容大小。

另外，请记住删除table-layout: fixed，否则它将使表格假定第一行列的测量值每隔一行...

.table-container {
    display: table;
    width: 100%;
    margin-top: 30px;
}
.table-row {
    display: table-row;
}
.table-cell {
    display: table-cell;
    padding: 2px;
    border-bottom: 2px solid rgba(255, 102, 102, .2);
}
.col1 {
    width: 10px;
    background-color: rgba(255, 51, 153, .2);
}
.col2 {
    background-color: rgba(51, 102, 255, .2);
}
.col3 {
    width: 135px;
    background-color: rgba(153, 102, 255, .2);
}
.col4 {
  width: 100%;
    background-color: rgba(204, 0, 204, .2);
}
* {
    font-family: 'Ubuntu', Arial;
}

<link  href="http://fonts.googleapis.com/css?family=Ubuntu:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css" >
<div class="table-container">
    <div class="table-row">
        <div class="table-cell col1"></div>
        <div class="table-cell col2">plz autosize me!</div>
        <div class="table-cell col3">i have a set width</div>
        <div class="table-cell col4">make me take up the rest</div>
    </div>
    <div class="table-row">
        <div class="table-cell col1"></div>
        <div class="table-cell col2">i hope</div>
        <div class="table-cell col3">that i will never</div>
        <div class="table-cell col4">let you down</div>
    </div>
    <div class="table-row">
        <div class="table-cell col1"></div>
        <div class="table-cell col2">i know</div>
        <div class="table-cell col3">that this</div>
        <div class="table-cell col4">could be more than</div>
    </div>
    <div class="table-row">
        <div class="table-cell col1"></div>
        <div class="table-cell col2">just flashing</div>
        <div class="table-cell col3">lights and sounds</div>
        <div class="table-cell col4">can we pick you off the ground</div>
    </div>
</div>

Answer 2

您想要的完全不能仅使用 CSS 完成 - 表格不够灵活。您可以为它们提供“自然”布局（所有单元格的宽度基于其内容）或固定布局（指定宽度）。所以你不能给一列固定宽度而另一列自然宽度。

但是，如果您愿意使用一些 JavaScript，保持固定布局并使一列与其内容一样宽并不难 - 只需计算内容的实际内容，并将宽度“硬编码”设置为价值。
我通过创建一个不可见的元素来做到这一点，我将所有内容复制到该元素并记住最大宽度。

const table = document.getElementsByClassName("table-container")[0];
const wdiv = document.getElementById('widthtest');
var width2 = 0;
const rows = table.children;
for (var row = 0; row<rows.length; ++row) {
    const cells = rows[row].children;
    if (cells!=undefined && cells.length>=4) {
        wdiv.textContent = cells[1].textContent;
        width2 = Math.max(width2, wdiv.clientWidth);
    }
}
rows[0].children[1].style.width = width2+'px';

见new fiddle。