在同一 HTML 表格行中组合自动、固定和百分比宽度答案

【问题标题】：Combine auto, fixed, and percentage width in same HTML table row在同一 HTML 表格行中组合自动、固定和百分比宽度
【发布时间】：2020-06-21 03:04:31
【问题描述】：

我想创建一个有 4 列的表。表中的 2 列是标签，应该自动调整到最宽的元素。其他列之一是固定宽度，最后一列应填充剩余空间。我第一次尝试创建此表如下所示：

HTML

<table style="width:100%">
<tr>
  <td class="lbl">lbl:</td> <td class="fluidContent">Expandable Content 1</td>
  <td class="lbl">longer label:</td> <td class="fixedContent">Me Fixed</td>
</tr>
<tr>
  <td class="lbl">longer label:</td> <td class="fluidContent">Expandable Content 2</td>
  <td class="lbl">lbl:</td> <td class="fixedContent">Me Fixed</td>
</tr>
</table>

CSS

table {
  white-space: nowrap;
}

td {
  border: 1px solid orange;
}

.lbl {
  text-align: right;
  font-style: italic;
  width: auto;
}

.fluidContent {
  width: calc(100% - 120px);
}

.fixedContent {
  width: 120px;
}

https://jsfiddle.net/vf5p0m82/

不幸的是，这种标记会产生具有流动宽度的标签列。 “lbl”类单元格被视为宽度为 27%，而“fluidContent”单元格的宽度为 46%。我想要的是“lbl”单元格尽可能小，同时仍然适合它们包含的最大字符串。

有没有什么方法可以简单地使用表格来实现这一点，或者是时候使用新的 CSS3 flex-boxes 了吗？

编辑：解决方案

为了清楚起见，我在这个问题中添加了另一个示例，但我偶然发现了一个让它起作用的技巧。如果您只是为自动调整大小的列提供 1px 的宽度，那么一切正常。看这里： https://jsfiddle.net/vf5p0m82/2/

是否有既定/规范的方式来做到这一点，或者是这样吗？

【问题讨论】：

abels and should auto-size to the widest element 是什么意思？您希望标签是其内容的宽度、最大列的宽度还是其他？
如果您对browser support for flexbox 感到满意，请用双臂搂住它，永远不要松开（我是最近的皈依者）
@dlsso - 我的意思是“标签”列的宽度应该是自动的。它们只包含文本并且没有换行，因此列中具有最长字符串的单元格设置了整个列的宽度。

标签： html css html-table fluid-layout

【解决方案1】：

可能有更正式的方法可以做到这一点，但我发现可行的方法是将单元格宽度设置为 1px。内容大小会覆盖它，因此它只会折叠到内容大小。

.lbl {
  text-align: right;
  font-style: italic;
  width: 1px;
}

顺便说一句，计算似乎被表格格式覆盖了，但从你所描述的内容来看，你似乎不需要它。

查看实际操作：https://jsfiddle.net/vf5p0m82/1/

【讨论】：

是的，你和我同时写这篇文章，只是将它作为编辑添加到我自己的 Q 中。
实际上我发现如果表格有一些 colspan 单元格，那么这样做是行不通的。请参阅上面我的问题中的新小提琴。
问题在于内联width 样式，而不是colspan。删除它，反正它对你没有任何作用。

【解决方案2】：

好的弹性盒解决方案：https://jsfiddle.net/vf5p0m82/4/

HTML

<div class="fTbl">
  <div class="fluidWrapper">
    <div class="shrinkCol">
      <div class="lbl">lbl:</div>
      <div class="lbl">long lbl:</div>
    </div>
    <div class="stretchCol">
      <div class="fluidCell">Expand Content</div>
      <div class="fluidCell">Expand Content</div>
    </div>
  </div>
  <div class="fixedWrapper">
    <div class="shrinkCol">
      <div class="lbl">longer label:</div>
      <div class="lbl">lbl:</div>
    </div>
    <div class="shrinkCol">
      <div class="fixCell" style="width:100px;">Fixed</div>
      <div class="fixCell" style="width:100px;">Fixed</div>
    </div>
  </div>
</div>

CSS

.fTbl {
  border: solid magenta 2px;
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  align-items: flex-start;
}

.fixedWrapper {
  display: flex;
  flex: 0 0 auto;
  flex-flow: row nowrap;
}

.fluidWrapper {
  display: flex;
  flex: 1 1 auto;
  flex-flow: row nowrap;
}

.shrinkCol {
  display: flex;
  flex: 0 0 auto;
  flex-flow: column nowrap;
}

.stretchCol {
  display: flex;
  flex: 1 1 auto;
  flex-flow: column nowrap;
}

.fluidCell {
  border: 2px solid orange;
  min-width: 140px;  
}

.fixCell {
  border: 2px solid orange;
}

.lbl {
  text-align: right;
  font-style: italic;
  border: 2px solid orange;
}

好的，这就是你一般如何使用这个 CSS：

必须将表格分成单独的列，并且每列独立地逐行填充。
如果不同列的行包含不同高度的项，则必须明确指定它们的高度相同。
标签/内容列对放置在 fixed/fluidWrapper 类中，以便标签和内容（通常是文本框）包裹在一起而不会分开。
如果不将行彼此分离并明确设置宽度，则不可能在 1 个弹性表中拥有“colspan”。

我喜欢这种方法，因为它很容易让弹性项目垂直和水平拉伸和压缩以填充页面，并且包装项目以响应窄屏幕相当简单。它也不需要像表格那样的 hacky CSS。我发现 HTML 表格有时会非常麻烦且不直观。

我不喜欢这种方法，因为不可能（或者可能很难）使表格的一行跨越多个列。如果有较宽的项目，则必须将其放置在新容器中，因此不会与其上方的项目共享其标签宽度。然而，这些抱怨似乎源于表格和弹性盒设计目标的内在差异，您必须简单地选择最适合给定布局的方法。

【讨论】：

【解决方案3】：

搜索生成自动表格列的宽度大约等于任何行中最宽的列的宽度出现在这个问题上。如果这是您想要做的，请在您的 CSS 中尝试 th,td {width: max-content;}。对我有用。

【讨论】：