Question

我有一个表格，我需要行中的最后一个td看起来像一个嵌套的行。

我无法将其设为新行，但我希望<td> </td>中的所有内容都嵌套在该行下。

请参阅此fiddle。您可以单击该图标以查看新行。但是我不能使用新行，它需要在同一个DOM行中。我希望最后一列向下移动看起来像一个新行。它没有必要对齐，只需要换一个新行。

是否有css可以实现这一目标？

我可以使用jquery / js来改变css以实现这一目标吗？

Answer 1

你可以使用colspan作为tr并给它你拥有的列数...那么你只需要一个td

Answer 2

您可以隐藏一些单元格，然后使用colspan来覆盖剩余的列。

<table>
  <tr>
    <td>1.1</td>
    <td>1.2</td>
    <td>1.3</td>
    <td>1.4</td>
  </tr>
  <tr>
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
    <td>2.4</td>
  </tr>
  <tr>
    <td class="hide">3.1</td>
    <td class="hide">3.2</td>
    <td class="hide">3.3</td>
    <td colspan=4>3.4</td>
  </tr>
</table>

table {width:100%;color:white}
td {background:blue}
tr:last-of-type td:last-of-type {background:green;}
.hide {display: none;}

如何使元素看起来像嵌套

2 个答案: