中断从特定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