Html 如何使一个 <td> 跨越两列表中的两列?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17605976/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 11:02:15  来源:igfitidea点击:

How to make one <td> span both columns in a two column table?

htmlcss

提问by Ben Ben-Hamo

click to see the image

点击查看图片

How can I create a table like the above example in HTML and CSS. I've tried the following:

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

but it won't work. Can anyone help?

但它不会工作。任何人都可以帮忙吗?

回答by Aldi Unanto

You should use colspanfor your second row. Like this :

你应该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>

For learn -> HTML Colspan

学习 -> HTML Colspan

回答by smilebomb

<td>s have a colspanattributethat determine how many columns it should span over. You example has 2 columns to span, so your cleaned up code would look like this:

<td>s 有一个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>

回答by FBaez51

<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 will help you. Link to more info.

colspan 会帮助你。链接到更多信息。