我需要让一行包含 4 个单元格,如下所示:前三个单元格在一行上,最后一个单元格在前三个单元格下面占一行,跨越所有这些单元格。像这样:
---------------------------------- <---Start Row
| | | |
| Cell 1 | Cell 2 | Cell 3 |
| | | |
----------------------------------
| |
| Cell 4 |
| |
---------------------------------- <---End Row
在 HTML 中有没有办法做到这一点?
您正在寻找 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>
我是一名优秀的程序员,十分优秀!