有没有办法在自己的行上显示一个<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>