使用rowspan和colspan对齐表格 [英] Align table using rowspan and colspan

问题描述

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

I want to create a table using rowspan and colspan and it is almost done. only the issue is in last tr. I don't know why but it is not picking the rowspan in last tr.

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

<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>

正如您所见，我想要的结果将最后一个空白td与 a 合并。

As you can see in result I want to merge the last blank td with a.

这是我想要的结果：

推荐答案

你应该把td之后的第一组单元格用3,4,5加上行+ colspan。

You should put the first set of cells with 3, 4, 5 after the td with the row+colspan.

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

And omit the empty cells from the last row.

结果：

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

<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>

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

Note that the second column never has content of its own, it is always part of a colspan set. That would normally make the second column collapse on most if not all browsers, and that is why the cell width is being set.

这篇关于使用rowspan和colspan对齐表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！