如何在不指定容器宽度时让表格最后一列填充父容器

要实现不指定父容器宽度时，表格最后一列填充父容器（父容器宽度由内部文本决定），可以按以下步骤调整CSS：

• 让表格占满父容器宽度：给table设置width: 100%，这样表格会继承父容器的宽度，而父容器因为是inline-block，会自动收缩到适配前几列内容的宽度。
• 固定前几列宽度：给除最后一列外的所有<td>设置white-space: nowrap，确保这些列的宽度仅由自身文本内容决定，不会被压缩换行。
• 让最后一列填充剩余空间：给最后一列<td>设置width: 100%，它会自动填满父容器中前几列之外的剩余空间。

调整后的完整代码：

.container{
  background-color: #003388;
  color: white;
  display: inline-block;
  padding: 8px; /* 可选，增加内边距优化视觉效果 */
}

table {
  background-color: #008833;
  color: white;
  width: 100%; /* 表格占满父容器宽度 */
  border-collapse: collapse; /* 可选，合并表格边框 */
}

table tr td:not(:last-child) {
  white-space: nowrap; /* 前几列不换行，宽度由内容决定 */
  padding: 6px;
}

table tr td:last-child {
  width: 100%; /* 填充剩余空间 */
  padding: 6px;
}

这样设置后，蓝色父容器的宽度会由表格前几列的文本内容决定，绿色表格的最后一列会自动填满父容器的剩余空间，不会出现撑满整个页面的问题。

内容的提问来源于stack exchange，提问作者user2361925