时间戳

首页 > 解决方案 > 将表格行换成新列

javascript - 将表格行换成新列

问题描述

我想从中间或从某个<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 中？提前致谢

标签： javascripthtmljquerycss

解决方案

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

可能的例子；

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>

推荐阅读