Html 使 <td> 跨越表格中的整行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26400006/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make a <td> span the entire row in a table
提问by Nadav Peled
I'm not new to HTML but haven't touched it for some good time and I've encountered an annoying problem.
我对 HTML 并不陌生，但已经有一段时间没有接触过它，而且我遇到了一个烦人的问题。
I have a table with two rows.
I want the first row to have one column - means that it will span the entire row, and I want the second row to have three columns, each one 33.3% of the row's width.
我有一张有两行的桌子。
我希望第一行有一个列 - 意味着它将跨越整行，我希望第二行有三列，每列占行宽的 33.3%。
I have this code for the table :
我有这个表的代码：
<table width="900px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">check</td>
</tr>
<tr>
<td align="center">check</td>
<td align="center">check</td>
<td align="center">check</td>
</tr>
</table>
But what happens is weird, the first row has one column with the same size as the second row's first column, and whenever I change one of them, it changes the other one too.
但是发生的事情很奇怪，第一行有一列与第二行的第一列的大小相同，每当我更改其中一个时，它也会更改另一列。
If I give the first row's <td>the width value of 500pxlets say, it sets the second row's first <td>to the same size.
如果我给第一行的<td>宽度值500px比方说，它会将第二行的第一行设置<td>为相同的大小。
What am I doing wrong ?
我究竟做错了什么 ？
回答by cypher75
You should use the colspanattribute on the first row's td.Colspan="3"will set the cell to flow over 3 columns.
您应该colspan在第一行的 td 上使用该属性。Colspan="3"将设置单元格流过 3 列。
<table width="900px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" colspan="3">check</td>
</tr>
<tr>
<td align="center">check</td>
<td align="center">check</td>
<td align="center">check</td>
</tr>
</table>
回答by Widor
You want to use the colspanattribute like this:
你想使用这样的colspan属性：
<table width="900px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" colspan="3">check</td>
</tr>
<tr>
<td align="center" >check</td>
<td align="center">check</td>
<td align="center">check</td>
</tr>
</table>回答by armen.shimoon
You can use colspan
您可以使用 colspan
<td align="center" colspan="3">check</td>
回答by Christian
Using colspan like this:
像这样使用 colspan：
<tr>
<td align="center" colspan="3">check</td>
</tr>
By colspan you merge the following cells in a row to one. If you use 2 in your sample you get one cell with a width of the first two columns and the third is as the third in the rest of the table.
通过 colspan 将一行中的以下单元格合并为一个。如果您在示例中使用 2，您将获得一个宽度为前两列的单元格，第三个单元格与表格其余部分的第三个相同。
回答by Aru
alter the first row with the below
用下面的改变第一行
<tr>
<td colspan="3" align="center">check</td>
</tr>
回答by Nelu
If you're using JSX(React) it should be written like this. The sin colspanis capitalized and the value is a number instead of a string.
如果您使用的是JSX( React)，则应该这样编写。该s在colspan资本化，该值是一个数字，而不是字符串。
<td colSpan={3}>Text</td>
