每4列自动换行td

Question

我的桌子上有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>

Answer 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>

Answer 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>