如何使一个跨两列表中的两列？

如何在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>

但它不起作用。谁能帮忙？

来源

2013-07-12 Ben Ben-Hamo

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td#attr- colspan – j08691

您应该使用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

来源

2013-07-12 01:03:19

在2016年年中挽救了我的生命！ –

<td>s have a colspan attribute决定它应该有多少列跨越。例如，您有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>

来源

2013-07-12 01:09:12 smilebomb

我知道这是一个古老的答案，但顶部是错误的。大多数浏览器会根据内容自动调整列的大小，所以不能保证两列的宽度相等。 – Martin

@Martin对。我想我应该去做空表格单元的行为。我已经让我的回答更清楚了。 – smilebomb

如何使一个​​跨两列表中的两列？

回答

相关问题

如何使一个跨两列表中的两列？