布局一个类似于表格的弹性框？答案

【问题标题】：Layout a flex box similar to a table?布局一个类似于表格的弹性框？
【发布时间】：2018-07-12 05:06:04
【问题描述】：

我正在使用内部开发的框架，该框架依赖于我们 HTML 的特定结构。棘手的事情之一是每一行都需要有自己的容器，并有自己的类和数据属性。

所以这就是问题所在。在不彻底改变 DOM 的情况下，我怎样才能使下面的 flex 框基本上像 HTML 表格一样呈现？还是只有一张桌子？该解决方案必须适用于 IE11 和 Chrome。

我正在努力让它看起来像这样......

Column A      |      Column B      |      Column C
1             |      2             |      3

section {
  display: flex;
  flex-wrap: wrap;
}

section .col {
  flex: 1 1 auto;
}

section .line-break {
  flex-basis: 100%;
  width: 0px; 
  height: 0px; 
  overflow: hidden;
}

<html>
  <head>
  </head>
  <body>
    <section>
      <header>
        <div class="col">Column A</div>
        <div class="col">Column B</div>
        <div class="col">Column C</div>
      </header>
      <div class="line-break"></div>
      <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
      </div>
    </section>
  </body>
</html>

【问题讨论】：

有时显示数据的最佳元素是表格。
如果是表格数据就使用它，如果不能更改标记需要表格，也可以选择使用css table。

标签： html css flexbox

【解决方案1】：

header, .row {
  display: flex;  /* aligns all child elements (flex items) in a row */
}

.col {
  flex: 1;        /* distributes space on the line equally among items */
}

<section>
  <header>
    <div class="col">Column A</div>
    <div class="col">Column B</div>
    <div class="col">Column C</div>
  </header>
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
  </div>
</section>

【讨论】：

这不起作用，因为第一行中的文本比第二行长。文本不会像请求者上面演示的那样在每一行中左对齐。
在我的 Chrome 浏览器中看起来不错。
上面的评论指的是，当一行中一个单元格的内容大于它的相等空间份额时，它会推动下一列并与其他行不对齐。那时桌子会更好。

【解决方案2】：

如果您要呈现的内容是表格数据类型，那么table是正确的方式。

HTML 5.1 W3C Recommendation, 1 November 2016, 4.9 Tabular data

鉴于您不能或不想更改标记，这可以使用 CSS Table 来完成，并且可以轻松地在任何显示类型之间切换，例如 flex、block 等。，甚至float，使用媒体查询等。

我还删除了 <div class="line-break"></div> 元素，因为您不需要，但如果它由组件或类似组件呈现，则保持原样不会造成任何问题。 p>

如果您仍然需要或必须使用 Flexbox，我的这个答案提到了 CSS Table 和 Flexbox 在两个重要特性上的区别：

Can flexbox handle varying sizes of columns but consistent row height?

已更新，展示了一些有用的 Flexbox 内容的示例，具有不同的宽度和跨度列。

堆栈 sn-p - Flexbox (Fiddle demo for IE11)

.tbl {
  display: flex;
  flex-direction: column;
}
.row {
  display: flex;
  min-height: 50px;
}
.cell {
  flex: 4;
  border: 1px solid red;
}
.cell:nth-child(1) {
  flex: 1;
}
.cell:nth-child(2) {
  flex: 2;
}
.cell.span4-5 {
  flex: 8 24px;                    /*  col 4,5 flex-grow/border/padding  */
}
.cell.span3-4 {
  flex: 8 24px;                    /*  col 3,4 flex-grow/border/padding  */
}
.cell.span3-5 {
  flex: 12 36px;                   /*  col 3,4,5 flex-grow/border/padding  */
}
.row:first-child .cell {
  display: flex;
  justify-content: center;         /*  center horiz. */
  align-items: center;             /*  center vert. */
}
.row .cell {
  padding: 5px;
  box-sizing: border-box;
}

<div class="tbl">
  <div class="row">
    <div class="cell">ID </div>
    <div class="cell">Nr </div>
    <div class="cell">Header 1 </div>
    <div class="cell span4-5"> Header 2 </div>
  </div>
  <div class="row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">Content</div>
    <div class="cell">Content</div>
    <div class="cell">Content</div>
  </div>
  <div class="row">
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell span3-5">Content</div>
  </div>
  <div class="row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell span3-4">Content</div>
    <div class="cell">Content</div>
  </div>
</div>

堆栈 sn-p - CSS 表

section {
  display: table;
  width: 100%;
}

section > * {
  display: table-row;
}

section .col {
  display: table-cell;
}

<html>
  <head>
  </head>
  <body>
    <section>
      <header>
        <div class="col">Column A</div>
        <div class="col">Column B</div>
        <div class="col">Column C</div>
      </header>
      <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
      </div>
    </section>
  </body>
</html>

【讨论】：

Css 表格只有在您的数据大小固定且表格具有确定的宽度和高度时才适用。如果表格是自动宽度和自动高度，并且数据的长度也会有所不同。桌子会看起来很丑很破。
@angrykiwi -- 元素类型的选择更多地与数据所代表的内容有关，而不是其大小。使用 CSS Table 或 <table> 将提供几乎相同的输出，因此我的建议与用户希望显示的数据类型有关。是的，一张桌子可能看起来很难看，尽管这里的问题和答案并没有试图回答这个问题，因为这不是我们所要求的。
@angrykiwi -- 我建议您发布一个既能解决所要求的问题的答案，又能说明如何使这样的 table 看起来不错。那将是一个很好的贡献。
这就是我的答案。表格并不总是用于表格数据。表格用于受控表格数据。如果这有助于 OP 理解并考虑您的答案和其他答案，并得出结论如何解决他的问题。
@angrykiwi -- 所以如果你这么认为，并为未来的用户提供帮助，为什么不把它作为答案发布，而不是告诉我。请注意，我并不反对，也从未说过“table 对于表格数据总是”。此外，可以随时删除评论，因此如果您希望它持续存在，那么正确的答案是最好的。 ...或者你的意思是我的回答是错误的，如果，它如何不回答 OP 的要求？

【解决方案3】：

此代码适用于我：

        * {
            box-sizing: border-box;
        }


        body, html {
            height: 100%;
            margin: 0;
        }


        #container {
            width: 400px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            background-color: lightgrey;
            padding: 10px;

        }


        .shelf {

            flex: 1 1 auto;
            width: 100%;
            margin-bottom: 10px;
            border: 1px solid black;
            background-color: lightgreen;

            display: flex;
            flex-direction: row;

        }
        .shelf:last-child {
            margin-bottom: 0;
        }


        .labelbox {
            flex: 0 0 35%;
        }


        .valuebox {
            flex: 0 0 65%;
        }

<div id="container">

    <div class="shelf">
        <div class="labelbox">Name: </div> <div class="valuebox">Barry Carter</div>
    </div>

    <div class="shelf">
        <div class="labelbox">DOB:</div><div class="valuebox">10/12/1980</div>
    </div>

    <div class="shelf">

        <div class="labelbox">
            Description:
        </div>

        <div class="valuebox">

            This content goes on and on and will force the height to expand. And the label box to the left will
            "move" with it. There need not be much of a relation other than that their parent div/flex-container is
            getting taller as well.

        </div>

    </div>

    <div class="shelf">
        <div class="labelbox">Group:</div><div class="valuebox">Advanced</div>
    </div>

    <div class="shelf">
        <div class="labelbox">End Date:</div><div class="valuebox">2020-09-20</div>
    </div>

</div>

【讨论】：

【解决方案4】：

使用 CSS 网格。您可以按照自己喜欢的方式设置任何表格的样式。

记住如果你的表超过 700 行，无论你使用什么 js 框架，帧率都会开始下降。 react、angular、vue 或 vanila JS。滚动会变得很慢。

你的行可以使用的最大值是 1000。超过这个额外的行会产生糟糕的图形。但无论如何你都不会达到 1000，因为在第 700 行，滚动速度开始变差。

如果您需要显示超过 1000 行，您将可视化 lib。每个 js 框架都有一个库来执行此操作。基本上，它将在视口中呈现行。不在视口中的行将不会被渲染。它们只会在用户滚动时呈现。

现在是 2021 年，您将来可能会阅读此答案，浏览器供应商可能会修复 1000 行的性能，他们甚至可能会扩大该限制。所以试试吧。

【讨论】：