Html 具有第一行-1单元格、第二行-2单元格、第三行-3单元格的表格_Html_Css

Html 具有第一行-1单元格、第二行-2单元格、第三行-3单元格的表格

html css

Html 具有第一行-1单元格、第二行-2单元格、第三行-3单元格的表格,html,css,Html,Css,我如何制作这样一个表格，第一行有1个单元格，第二行有2个单元格，第三行有3个单元格，每行的所有单元格大小都相同？有可能吗？一个老把戏是在第三行嵌套一个表。像这样： <!DOCTYPE html> <html> <head> <style> .two-column { width: 50%; } .three-column { width: 33.3%; } </style> </head> <body>

我如何制作这样一个表格，第一行有1个单元格，第二行有2个单元格，第三行有3个单元格，每行的所有单元格大小都相同？

有可能吗？

一个老把戏是在第三行嵌套一个表。像这样：

<!DOCTYPE html>
<html>
<head>
<style>
.two-column {
 width: 50%;
}
.three-column {
  width: 33.3%;
}
</style>

</head>

<body>
<table class="my-table">
  <tr>
    <td colspan="3">Row 1 column 1</td>
  </tr>
  <tr>
    <td class="two-column">Row 2 column 1</td>
    <td class="two-column" colspan="2">Row 2 column 2</td>
  </tr>
  <tr>
    <td colspan="3">
        <table class="my-nested-table">
            <tr>
                <td class="three-column">Row 3 column 1</td>
                <td class="three-column">Row 3 column 2</td>
                <td class="three-column">Row 3 column 3</td>
            </tr>
        </table>
    </td>
  </tr>
</table>
</body>

</html>


.两列{
宽度：50%；
}
.三列{
宽度：33.3%；
}
第1行第1列
第2行第1列
第2行第2列
第3行第1列
第3行第2列
第3行第3列

这里有一个更简单的解决方案

CSS:

HTML:


第一
第一
第二
第一
第二
第三

下面是一个例子

试试看。网上有很多免费的HTML编辑器应用程序可以帮你完成这项工作。为什么你特别想把它作为一个表格？这是用于内容还是布局目的？如果出于布局的目的，我建议不要使用表，而是将div与网格系统一起使用。想想Boootsrap或960 GridThank，那我为什么会被拒绝呢？看来这是一个很好的挑战，不是吗？不知道为什么你会被拒绝。不是我投了反对票。如果您对我的答案感到满意，那么请随意投票认为它是正确的：-）我尝试了它，但它不起作用：-（我测试了它，它确实起作用。将我的代码复制到它自己的table.html文件中，并在您的桌面上进行测试。添加table，td{border:1px纯红；}因此，您可以看到单元格的结尾。好的，这可能是一个交叉broser的东西。在Safari中工作，但在Chrome中不工作。在上面的代码中，将colspan=“2”更改为colspan=“3”。我将查看是否可以编辑

table {
  width: 100%;
  border: none;

}
.td_b {
  border: 1px solid black;
}

<table>
  <tr>
   <td>
    <table>
     <tr>
      <td class="td_b">1st</td>
     </tr>
    </table>
   </td>
  </tr>
  <tr>
   <td>
    <table>
     <tr>
      <td class="td_b">1st</td>
      <td class="td_b">2nd</td>
     </tr>
    </table>
   </td>
  </tr>
  <tr>
   <td>
    <table>
     <tr>
      <td class="td_b">1st</td>
      <td class="td_b">2nd</td>
      <td class="td_b">3rd</td>
     </tr>
    </table>
   </td>
  </tr>
</table>

table {
  width: 100%;
  border: none;
}
td {
  border: 1px solid black;
}
.td_1 {
  width: 100%;
}
.td_2 {
  width: 50%;
}
.td_3 {
  width: 33%;
}

<table>
  <tr>
    <td class="td_1" colspan="6">1st</td>
  </tr>
  <tr>
    <td class="td_2" colspan="3">1st</td>
    <td class="td_2" colspan="3">2nd</td>
  </tr>
  <tr>
    <td class="td_3" colspan="2">1st</td>
    <td class="td_3" colspan="2">2nd</td>
    <td class="td_3" colspan="2">3rd</td>
  </tr>
</table>