html - 如何在延续上一栏内容的页面中创建多个栏。 - HTML，CSS

Question

首先，对于任何语法错误，我深表歉意，我不是英语专家。

所以，我需要的是将我的页面分成支持一个表的三个列，当这个表达到一个列时，例如，高度:1000px，它将转到另一个专栏。

我试着在 Paint 中做了一个简单的例子:

我尝试的所有操作都只是将页面分成三列，但它们并没有像我想要的那样相互交互。有什么办法吗？

P.S:这个表是从我的数据库中创建的，所以它不是一个固定的表。

Answer 1

我觉得在某种程度上，当它成为标准时，这将是 CSS Grid Layout 的一个不错的用例。 ，或者至少它可能更语义化。但是现在你绝对可以将 flexbox 样式应用于 <table> :

table {
  /* forces the table to be full width 
     even without enough content */
  display: block;
}

tbody {
  border: 1px solid black;

  /* display flex will reflow child elements 
     once they hit a limit in their parent */
  display: flex;

  /* flex-flow sets the direction to flow child elements, 
     and if they should wrap when hitting 
     the end of their parent */
  flex-flow: column wrap;

  max-height: 80px;
  width: 100%;
}

tr {
  border: 1px solid #bad;

  /* the 33% (the flex basis) is how i'm 
     getting 3 columns, adjusting this will adjust 
     your number of columns, it's not the most general solution, 
     but it'll work for you case */
  flex: 0 0 33%;
}

td {
  border: 1px solid #ace;
}

<table>
  <tbody>
    <tr>
      <td>row data</td>
    </tr>

    <tr>
      <td>row data</td>
    </tr>

    <tr>
      <td>row data</td>
    </tr>

    <tr>
      <td>row data</td>
    </tr>

    <tr>
      <td>row data</td>
    </tr>
  </tbody>
</table>