0

我想从中间或从某个<tr>

<table>
  <tbody>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
        <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
        <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
        <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
        <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
        <tr>
      <td>Here:</td>
      <td>B</td>
    </tr>
        <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
        <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
        <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
        <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
        <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
        <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
        <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
  </tbody>
</table>

这是我的代码，我希望它从

<tr>
   <td>Here:</td>
   <td>B</td>
</tr>

是否有可能在纯 CSS 或 JS 中？提前致谢

4

2 回答 2

1

您可以将显示重置为网格并选择“此处”的上一行以在第二列中调度其余部分。

可能的例子；

table {
  width: max-content;
}

table,
tbody,
tr {
  display: grid;
}

tbody,
tr {
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: row dense;
}

tr {
  grid-column: 1;
}

tbody>tr:nth-child(5)~tr {
  grid-column: 2;
}

table,
td,
tbody:after {
  border: solid 1px;
  margin: 1px;
}

tbody:after {
  padding:0.15em;
  content: '?? a void to fill';
  grid-row: auto /span 10;
  background: #bad;
}
<table>
  <tbody>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
    <tr>
      <td>Here:</td>
      <td>B</td>
    </tr>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
  </tbody>
</table>

于 2020-11-20T15:16:28.323 回答
0

如果您的意思是拆分新列，我猜这个拆分列的
代码<th>.......</th>

你的代码是：

<tr>
   <td>Here:</td>
   <td>B</td>
</tr>

我改变了

     <tr>
      <th scope="col" colspan="2">SPLITTER</th>
    </tr>

所以会得到像这个片段中的输出：

<table>
  <tbody>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
        <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
        <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
        <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
        <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
    <tr>
      <th scope="col" colspan="2">SPLITTER</th>
    </tr>
    <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
        <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
        <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
        <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
        <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
        <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
        <tr>
      <td>A:</td>
      <td>B</td>
    </tr>
  </tbody>
</table>

于 2020-11-20T15:15:03.223 回答