使用rowspan和colspan

Question

我想使用rowspan和colspan创建一个表格，它几乎完成了。只有问题出现在最后tr。我不知道为什么，但它没有在最后一个tr中选择rowspan。

＆＃13;

＆＃13;

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;    
}

＆＃13;

<table style="width:50%">
	<tr>
		<td height="75px">1</td>
		<td colspan="4" height="75px">2</td>
	</tr>
	<tr>
		<td rowspan="3" colspan="2">a</td>
	</tr>
	<tr>
		<td>3</td>
		<td>4</td>
		<td>5</td>
	</tr>
	<tr>
		<td>3</td>
		<td>4</td>
		<td>5</td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
	</tr>
	
</table>

＆＃13;

＆＃13;

＆＃13;

正如您在结果中看到的，我想将最后一个空白td与 a 合并。

这是我想要的结果：

Answer 1

你应该把第一组单元格放在td之后的3,4,5和行+ colspan。

并省略最后一行的空单元格。

结果：

＆＃13;

＆＃13;

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
th,
td {
  padding: 5px;
  text-align: left;
}

＆＃13;

<table style="width:50%">
  <tr>
    <td width="20%" height="75px">1</td>
    <td colspan="4" height="75px">2</td>
  </tr>
  <tr>
    <td rowspan="3" colspan="2">a</td>
    <td width="20%">3</td>
    <td width="20%">4</td>
    <td width="20%">5</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

请注意，第二列永远不会有自己的内容，它始终是colspan集的一部分。这通常会使第二列在大多数浏览器上崩溃，这就是设置单元格宽度的原因。

Answer 2

这只是计算中的错误。 rowspan="3"表示它跨越三个行。

第一行

<tr>
    <td rowspan="3" colspan="2">a</td>
</tr>

第二行

<tr>
    <td>3</td>
    <td>4</td>
    <td>5</td>
</tr>

第三行

<tr>
    <td>3</td>
    <td>4</td>
    <td>5</td>
</tr>

第四行......所以它没有跨越它。

<tr>
    <td></td>
    <td></td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
</tr>

（你应该省略最后一行的空单元格。）

Answer 3

试试这个：

＆＃13;

＆＃13;

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;    
}

＆＃13;

<table style="width:50%">
	<tr>
		<td height="75px">1</td>
		<td colspan="4" height="75px">2</td>
	</tr>
	<tr>
		<td rowspan="3" colspan="2">a</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
	</tr>
	<tr>
		<td>3</td>
		<td>4</td>
		<td>5</td>
	</tr>
	<tr>    		
		<td>3</td>
		<td>4</td>
		<td>5</td>
	</tr>
	<tr>    		
	<tr style="visibility:hidden">    		
		<td>3</td>
		<td>4</td>
		<td>5</td>
	</tr>
	</tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 4

为了保持单元格的重叠，您需要使用“不可见”行作为参考。我不知道有任何其他方法可以实现这一点，因为colspan和rowspan需要实际的细胞作为参考。

以下是以这种方式运行的示例的更新版本。不得不稍微改变CSS以防止隐藏单元格周围出现双边框。

table {
    border-collapse: collapse;
}

th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;    
}

.reference,
.reference td {
  padding: 0px 5px;
  height: 0px;
  line-height: 0px;
  border: 0 none;
}

<table style="width:50%">
	<tr>
		<td height="75px">1</td>
		<td colspan="4" height="75px">2</td>
	</tr>
	<tr>
		<td rowspan="4" colspan="2">a</td>
	</tr>
	<tr>
		<td>3</td>
		<td>4</td>
		<td>5</td>
	</tr>
	<tr>
		<td>3</td>
		<td>4</td>
		<td>5</td>
	</tr>
	<tr>
		<td>3</td>
		<td>4</td>
		<td>5</td>
	</tr>
	<tr class="reference">
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	
</table>