javascript - 将 html 表中的第一个 td 重新设计为 rowspan

Question

我有这样的表:

<table>
   <thead>
      <tr>
         <th></th>
         <th>Col1</th>
         <th>Col2</th>
         <th>Col3</th>
         <th>Col4</th>
         <th>Col5</th>
      </tr>
   </thead>
   <tbody>
   <tr>
       <td class="control"></td>
       <td>AA</td>
       <td>BB</td>
       <td>CC</td>
       <td>DD</td>
       <td>EE</td>
   </tr>
   ...
</table>

由于页面大小调整，我想将该表格更改为如下表格设计。该更改应仅应用于奇数行，因为偶数行被隐藏，并且当我单击第一个具有控制类的 td 时，它会显示。

<table>
    <tr>
       <td rowspan="6" class="control"></td>
    </tr>
    <tr>
       <td>Col1</td>
       <td>AA</td>
    </tr>
    <tr>
       <td>Col2</td>
       <td>BB</td>
    </tr>
   <tr>
       <td>Col3</td>
       <td>CC</td>
    </tr>
<tr>
       <td>Col4</td>
       <td>DD</td>
    </tr>
    <tr>
       <td>Col5</td>
       <td>EE</td>
    </tr>
   ...

检查此链接 https://jsfiddle.net/pmtgqmsa/2/

Answer 1

您可以使用弹性框来完成此类任务。

flex-box 能够改变当前内容从行到列的流动。只需将 flex-flow: column; 更改为 flex-flow: row;

这是fiddle

您可以在css-tricks中了解有关flex-box的更多信息。

由于现在是 div，因此您也不会遇到行/列跨度问题。您可以自由调整高度和宽度。