提问人：Ben Ben-Hamo 提问时间：7/12/2013 最后编辑：joranBen Ben-Hamo 更新时间：1/11/2020 访问量：114824
如何使一个 <td>跨越两列表中的两列？
How to make one <td> span both columns in a two column table?
问：
如何在 HTML 和 CSS 中创建像上面示例一样的表格。 我尝试了以下方法：
<table>
<tr>
<td style="width:50%">TEXT</td>
<td style="width:50%">TEXT</td>
</tr>
<tr>
<td style="width:100%">TEXT</td>
</tr>
但这行不通。谁能帮忙？
答：
123赞
Aldi Unanto
7/12/2013
#1
您应该用于第二行。喜欢这个：colspan
<table>
<tr>
<td style="width:50%">TEXT</td>
<td style="width:50%">TEXT</td>
</tr>
<tr>
<td colspan="2" style="width:100%">TEXT</td>
</tr>
...
</table>
对于学习 -> HTML Colspan
12赞
smilebomb
7/12/2013
#2
<td> 有一个 colspan 属性，用于确定它应该跨越多少列。您的示例有 2 列要跨越，因此清理后的代码将如下所示：
<table>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
<tr>
<!-- The important part is here -->
<td colspan="2">This will have 100% width by default</td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
</table>
评论
2赞
Martin
1/19/2016
我知道这是一个古老的答案，但顶部是错误的。大多数浏览器会根据内容自动调整列的大小，因此您不能保证两列的宽度相等。
0赞
smilebomb
11/1/2017
@Martin对。我想我正在考虑空表单元格会像那样表现。我已经把我的答案说得更清楚了。
2赞
FBaez51
1/11/2020
#3
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td colspan="2">Cell 3 (Two columns)</td>
</tr>
</table>Colspan 将为您提供帮助。链接到更多信息。
评论