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>

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>

有没有办法在自己的行上制作一个显示器？

2 个答案: