每 4 列自动换行 td答案

【问题标题】：Auto wrap td every 4 columns每 4 列自动换行 td
【发布时间】：2018-01-26 19:18:16
【问题描述】：

我的表中有 8 个 td，我的问题是我想每 4 列包装一次 td。所以简而言之，我希望第 5 个 td 将显示在新行中。请帮我。谢谢。

<div id="schedule">
    <table>
    <tbody>
        <tr>
            <td>terdg</td>
            <td>yhr6t</td>
            <td>yhr6t</td>
            <td>yhr6t</td>

            <td>hgf</td>
            <td>gdrg</td>
            <td>tyht</td>
            <td>drf</td>
        </tr>
        </tbody>
    </table>
</div>

【问题讨论】：

所以关闭第四个 td 之后的行。真正的问题是什么？
你需要什么？我的意思是如果你能在一些图像/模型中展示。

标签： html css

【解决方案1】：

如果您必须保留相同的 HTML 结构，您可以使用浮动来管理它，但您可能会丢失单元格的 “tableness”，您可能必须相应调整。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

table {}

td {
  float: left;
  width: 25%;
  padding: 1em;
  border: 1px solid grey;
  white-space: nowrap;
}

td:nth-child(4n + 1) {
  clear: both;
}

<div id="schedule">
  <table>
    <tbody>
      <tr>
        <td>cell 1</td>
        <td>cell 2</td>
        <td>cell 3</td>
        <td>cell 4</td>
        <td>cell 5</td>
        <td>cell 6</td>
        <td>cell 7</td>
        <td>cell 8</td>
        <td>cell 9</td>
        <td>cell 10</td>
        <td>cell 11</td>
        <td>cell 12</td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：

【解决方案2】：

<div id="schedule">
    <table>
    <tbody>
        <tr>
            <td>terdg</td>
            <td>yhr6t</td>
            <td>yhr6t</td>
            <td>yhr6t</td>
        </tr>
        <tr>
            <td>hgf</td>
        </tr>
        <tr>
            <td>gdrg</td>
            <td>tyht</td>
            <td>drf</td>
        </tr>
        </tbody>
    </table>
</div>

【讨论】：