html - 有没有办法让一个 <td> 显示在它自己的行上？

Question

我需要让一行包含 4 个单元格，如下所示:前三个单元格在一行上，最后一个单元格在前三个单元格下面占一行，跨越所有这些单元格。像这样:

----------------------------------  <---Start Row
|          |          |          |
|  Cell 1  |  Cell 2  |  Cell 3  | 
|          |          |          |
----------------------------------
|                                |
|              Cell 4            |
|                                |
----------------------------------  <---End Row

在 HTML 中有没有办法做到这一点？

Answer 1

您正在寻找 colspan属性...

<tr>
  <td>Cell 1</td>
  <td>Cell 2</td>
  <td>Cell 3</td>
</tr>
<tr>
  <td colspan="3">Cell 4</td>
</tr>

colspan 允许您将单个单元格“跨越”到多个列。此属性的垂直伙伴是 rowspan，它允许您将单个单元格跨越多个行

---

但是，在直接回答您的问题时，我认为一行中的第 4 个单元格不可能出现在下一行。

我的理解是，您必须创建 2 个单独的行才能实现您的目标。 (如果有人证明我错了，我很乐意删除我的答案)

---

基于以上内容，如果 jQuery 答案是可以接受的，您可以执行以下操作...

$(function() {
  // Get the last child, detach from the row and add colspan
  $lastTd = $("table tr td:last-child").detach().attr("colspan", "3");
  // Create a new row, add the detached cell, and add to the table
  $("table").append($("<tr></tr>").append($lastTd));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>