带有 display:flex 的表格列未对齐答案

【问题标题】：Table columns with display:flex are misaligned带有 display:flex 的表格列未对齐
【发布时间】：2018-07-26 15:30:26
【问题描述】：

我创建了一个表格，出于任何（重要）原因（因为我不知道一行中有多少个单元格来自后端，这就是为什么我不能为此使用 colspan，可以是一行有 2 个单元格和第二个，例如 4）我需要为此使用 flexbox。但是当一个单元格中的文本较长时会出现问题 - 然后所有布局都损坏了

我该如何解决这个问题？

我已经申请了：

tr {
display: flex;
flex-direction: row;
}

td {
display: flex;
width: 100%;
}

非常感谢您的帮助！

【问题讨论】：

Flexbox 不会在更大的上下文（表格）中对齐列。您可以使用 display: table-row 和 display: table-column 作为替代
感谢您提供您的 CSS，但您能否也提供相关的 HTML？没有它很难回答这个问题。如果您可以更新您的问题以在minimal, complete, and verifiable example 中列出所有相关代码，这将有所帮助。如果您的 HTML 是在服务器端生成的，请发布输出。有关更多信息，请参阅有关how to ask good questions 的帮助文章:)
如果你用的是table，这种布局最适合……我不明白你为什么在tr中使用flex..？
我们无法调试图像，我们需要一个工作代码 sn-p 才能提供正确的答案。此外，当您说您不知道从后端返回什么时，唯一明智的解决方案是使用脚本。

【解决方案1】：

这里的问题是您的td 标记具有display: flex; 属性，但没有设置flex 值。

当flex 属性未定义时，每个都将在不换行时占用最多的空间。

使用下一个 CSS：

td {
  flex:  1;  
}

我建议，对于较长的字段，您使用较高的flex 值（例如flex: 4），对于较短的字段，使用较低的flex 值（例如flex: 1）。

我正在附加一个具有所需行为的代码笔。

当您没有所述单元格的值时，只需使用包含&nbsp; 的td。

【讨论】：

【解决方案2】：

您可以通过设置单元格的最小宽度来覆盖溢出行为：

td {
  flex: 1;
  min-width: 0;
}

【讨论】：