Question

我想创建一个包含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灵活盒？

编辑：解决方案

虽然为了清楚起见在这个问题上添加了另一个例子但我偶然发现了一个让它成功的黑客行为。如果您只给自动大小的列宽度为1px，那么一切都会成功。看这里： https://jsfiddle.net/vf5p0m82/2/

是否有既定的/规范的方式来做这个或是这样吗？

Answer 1

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

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

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

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

Answer 2

好的flexbox解决方案：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个flex表中使用“colspan”。

我喜欢这种方法，因为很容易让flex项目纵向和横向拉伸和压缩以填充页面，并且包装项目以响应窄屏幕非常简单。它也不像表那样需要hacky CSS。我发现HTML表格有时非常繁琐且不直观。

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

Answer 3

这里要搜索自动生成的表列宽度大约等于任何行中最宽列的宽度。如果您要这样做，请在CSS中尝试th,td {width: max-content;}。为我工作。

将自动，固定和百分比宽度合并到同一HTML表格行

3 个答案: