HTML表合并不工作

我试图让HTML表合并不工作

+---------+---------------------------+--------------+ 
|   |       |    | 
+---------+       |    | 
|   |       |    | 
|   +-----------------+---------+    | 
|   |     |   |    | 
|   +-----------------+   |    | 
|   |     |   |    | 
|   +-----------------+   |    | 
|   |     |   |    | 
+---------+-----------------+---------+    | 
|   |     |   |    | 
+---------+-----------------+---------+--------------+

的HTML

<table> 
    <tr> 
     <td></td> 
     <td rowspan="2" colspan="2"></td> 
     <td rowspan="6"></td> 
    </tr> 
    <tr> 
     <td rowspan="4"></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td rowspan="3"></td> 
    </tr> 
    <tr> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
</table>

但是这是行不通的。我无法合并2 * 2单元格中第一行的第二列。它总是只有colspan="2"。 rowspan="2"不起作用。我试图使用HTML表格生成器网站，如http://html-tables.com/，但它不工作。

这就是我得到

+---------+---------------------------+--------------+ 
|   |       |    | 
+---------+-----------------+---------+    | 
|   |     |   |    | 
|   +-----------------+   |    | 
|   |     |   |    | 
|   +-----------------+   |    | 
|   |     |   |    | 
+---------+-----------------+---------+    | 
|   |     |   |    | 
+---------+-----------------+---------+--------------+

我认为这是不可能的HTML，因为它没有在任何地方工作？有什么方法可以实现我想要的结果吗？如图所示。

来源

2012-12-25 Anuj

这是布局吗？不要使用表格进行布局。出于这个原因。 – Ryan

这不适用于布局。我需要展示一些数据，并且我需要在一个页面上放置多个表格。这就像1个产品的表格。虽然我可以通过CSS来做到这一点，但我只是看到了这个问题，无法弄清楚我应该做什么。所以我在这里知道.. – Anuj

首先，你的图形显示有六行，但该表只有五tr元素。为了解决这个问题，重复第四tr元素，

<tr> 
     <td></td> 
    </tr>

即使在此修复程序，该表不看的权利，但这是因为它没有真正的内容。没有什么要求第二排有正高。将一些多行内容添加到第二个td元素，您会看到它使第二行增益高度。

来源

2012-12-25 19:20:46

是的，这是真的。如果我添加内容，第二个单元格会获得高度，但除非我有足够的内容，否则不会。我希望第二个单元具有比第一个单元更高的高度。似乎这是不可能的默认情况下。 – Anuj

您可以在表格行上设置最小高度，例如'tr {height：2em}'。 –

检查表的列数和行数不匹配。 div元素里面你可以创建一个HTML表，如下所示：

<div> 
    <table border="1" width="50%" cellspacing="10" cellpadding="10"> 
     <tr> 
      <td style="width:60px"></td> 
      <td></td> 
      <td rowspan="3"></td> 
     </tr> 
     <tr style="height:50px"> 
      <td colspan="2"> 
       <table border="1" width="100%" cellspacing="10" cellpadding="10"> 
        <tr> 
         <td></td> 
         <td> 
          <table width="100%" cellpadding="10" cellspacing="10" border="1"> 
           <tr> 
            <td></td> 
           </tr> 
           <tr> 
            <td></td> 
           </tr> 
           <tr> 
            <td></td> 
           </tr> 
          </table> 
         </td> 
         <td></td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="2"> 
       <table border="1" width="100%" cellspacing="10" cellpadding="10"> 
        <tr> 
         <td></td> 
         <td></td> 
         <td></td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </table> 
</div>

来源

2012-12-25 18:42:13

HTML表合并不工作

回答

相关问题