Question

我可能错过了一些明显的东西，但我无法弄清楚这一点。

我的桌子占据了其容器宽度的100％。第一列和第三列设置了宽度。我希望第二列适合其内容（理想情况下具有最大宽度）和第四列以占用剩余空间。

第三个和第四个实际上是输入框，所以我不关心文本是否包含在这个例子中。（我在这里使用了文字，因为它更容易看到发生了什么。根据本地测试，我认为它不会产生任何影响。）

.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完成 - 表格不够灵活。要么你给他们一个＆＃34;自然＆＃34; layout（基于内容的所有单元格的宽度）或固定布局（指定的宽度）。因此，您无法为一列提供固定宽度，而另一列则为自然宽度。

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

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。

display：table - 第一列设置宽度，第二列适合内容，第三列设置宽度，第四列占用余数

2 个答案: