html - 将行从特定的 td 换行到下一行

Question

我有一个表，其中 <td>正在动态地到来，一些 <td>将带有特定的类，在该类上应该打破行和其他 <td>应该从下一行开始。

作为 <td>正在动态地到来，我无法创建另一个 <tr>我想用 css 打破它。

我在 stackoverflow 上看过其他示例，但它们显示打破了所有 <td>到下一行，但我想从特定的 <td> 中断然后所有其他<td>接续此<td>

td.break {
  display:block;
}

<table>
  <tr>
    <td>hdv</td>
    <td>hdv</td>
    <td class="break">hdv</td>
    <td>hdv</td>
    <td>hdv</td>
    <td>hdv</td>
    <td>hdv</td>
    <td>hdv</td>
    <td>hdv</td>
    <td class="break">hdv</td>
    <td>hdv</td>
    <td>hdv</td>
    <td>hdv</td>
    <td>hdv</td>
    <td>hdv</td>
    <td>hdv</td>
    <td>hdv</td>
    <td>hdv</td>
  </tr>
</table>

我尝试使用 display:block但如果应用在单个 <td> 上则不起作用.

Answer 1

感谢 Hidden Hobbes 的回答，我找到了解决方法。

可能它不是那么突出的代码，但它的工作绝对没问题。

使用 display:block在 <tr>和 float:left在 .break

tr {
  display: block
}
td.break {
  float: left;
  line-height: 22px;
}

<table>
  <tr>
    <td>hdv</td>
    <td>hdv</td>
    <td class="break">hdv</td>
    <td>hdv</td>
    <td>hdv</td>
    <td>hdv</td>
    <td>hdv</td>
    <td>hdv</td>
    <td>hdv</td>
    <td class="break">hdv</td>
    <td>hdv</td>
    <td>hdv</td>
    <td>hdv</td>
    <td>hdv</td>
    <td>hdv</td>
    <td>hdv</td>
    <td>hdv</td>
    <td>hdv</td>
  </tr>
</table>

一点line-height在我们使用 float:left 时进行管理