使 <td> 跨越表中的整行答案

【问题标题】：Make a <td> span the entire row in a table使 <td> 跨越表中的整行
【发布时间】：2014-12-11 13:27:18
【问题描述】：

我对 HTML 并不陌生，但已经有一段时间没有接触过它了，我遇到了一个烦人的问题。

我有一个有两行的表。
我希望第一行有一列 - 意味着它将跨越整行，我希望第二行有三列，每列占行宽的 33.3%。

我有这个表格的代码：

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

但是发生的事情很奇怪，第一行有一列与第二行的第一列大小相同，每当我更改其中一个时，它也会更改另一个。

如果我将第一行的<td> 的宽度值设为500px，它会将第二行的第一行<td> 设置为相同的大小。

我做错了什么？

【问题讨论】：

标签： html html-table

【解决方案1】：

您应该在第一行的 td 上使用 colspan 属性。
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>

【讨论】：

【解决方案2】：

您想像这样使用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>

【讨论】：

【解决方案3】：

你可以使用 colspan

<td align="center" colspan="3">check</td>

http://www.w3schools.com/tags/att_td_colspan.asp

【讨论】：

【解决方案4】：

如果你使用的是 JSX (React)，它应该这样写。 colspan中的s是大写的，值是数字而不是字符串。

<td colSpan={3}>Text</td>

【讨论】：

【解决方案5】：

像这样使用 colspan：

    <tr>
        <td align="center" colspan="3">check</td>
    </tr>

通过 colspan，您可以将一行中的以下单元格合并为一个。如果您在示例中使用 2，您将得到一个宽度为前两列的单元格，第三个与表格其余部分中的第三个相同。

【讨论】：

【解决方案6】：

用下面的内容改变第一行

<tr>
    <td colspan="3" align="center">check</td>
</tr>

【讨论】：