html - CSS：如何使表格单元格自动缩小或扩大以使表格保持其大小？

Question

所以我有一个 3 列表，我想显示

示例布局 1：

A BBBBBBBBBB C
A B          C
A BBBBBBB... C

示例布局 2：

A B... CCCCCCC
A B    C

示例布局 3：

A  B        C    
AA BB       CC

（以下是我可以忽略的可选情况，但如果 更好）

示例布局 4：

AA B... CCCC..
A  BB   CC

示例布局 5：

A... B... C...
AA   BB   CC

所以规则就像

1. 表格宽度由父 div 决定。它不能改变。

2. 行高始终保持不变。

3. A 和 C 列保持最小尺寸以显示完整内容。

4. 如果剩余空间紧凑，B 将缩小为 B...。

5. 如果 A 和 C 只占用一点空间，B 将扩展到全宽。

6. 可选：如果 B 处于其最小大小并且 A 和/或 C 仍然无法容纳，请尝试将 1~5 的相同规则一一应用于其他列，直到我们完成

我试过的就像，但这不会让桌子保持原来的大小。

table {
  border-collapse: collapse;
  max-width: 150px;
  display: block;
}

tr {
  width: 100%;
}

td {
  border: solid 1px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.autoCol {
  width: 100%;
}

<div style="width:150px">
  <table>
    <tr>
      <td>a</td>
      <td class="autoCol">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</td>
      <td>c</td>
    </tr>
    <tr>
      <td>aaaaaa</td>
      <td class="autoCol">bbbbbb</td>
      <td>cccc</td>
    </tr>
    </table>
</div>

Answer 1

试试这个方法：

 table {
        border-collapse: collapse;
        max-width: 150px;
    }
    
    table td {
        width:100%;
    }
    
    table td.shrink {
        white-space:nowrap
    }