有没有办法让一个​​显示在自己的行上？

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> 

的合并单元格将让您“跨越”一个在多个列细胞。这个属性的垂直合作伙伴是rowspan这将让你跨越一个单元格在多个行

---

然而，在直接回答你的问题，我不相信这是可能有内第四单元一行出现在下一行。

我的理解是，你将不得不创建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>

Answer 2

不知道如何清理这个可能，是我的解决方案与单一tr和4 TD的

td { 
 
    border: 1px solid black; 
 
} 
 

 
tr{ 
 
    width:120px; 
 
    height:50px; 
 
    display: table-caption; 
 
} 
 

 
tr >td{ 
 
    width:40px; 
 
} 
 

 
tr > td:nth-child(4) 
 
{ 
 
    width:120px; 
 
    position:absolute; 
 
    display:block; 
 
}

<table> 
 
<tbody> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    <td>full width td</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    <td>full width td</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    <td>full width td</td> 
 
    </tr> 
 
</tbody> 
 
</table>