HTML表，合并单元格问题

一个表，这是我所得到的，当我运行我的HTML代码

列的宽度不一样的甚至在设置colspan之后的所有列。根据我的预期，可能“colspan”属性不起作用。我究竟做错了什么？

我的代码：

<table border="5" width="400" height = "400" table-layout = "auto"> 
 
    <tr> 
 
    <td colspan="4" align="center" style="width: 100%;">Colspan = “4”</td> 
 
    </tr> 
 
    <tr> 
 
    <td rowspan="3" colspan="1" style="width: 25%;"> col1 </td> 
 
    <td rowspan="3" colspan="1" style="width: 25%;"> col2 </td> 
 
    <td rowspan="3" colspan="1" style="width: 25%;"> col3 </td> 
 
    <td rowspan="3" colspan="1" style="width: 25%;"> col4 </td> 
 
    </tr> 
 
    <tr></tr> 
 
    <tr></tr> 
 
    <tr> 
 
    <td colspan="2" style="width: 50%;"> colspan = 2 </td> 
 
    <td colspan="2" style="width: 50%;"> colspan = 2 </td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="3" style="width: 75%;"> colspan = 3</td> 
 
    <td style="width: 25%;"> colspan = 1 </td> 
 
    </tr> 
 
</table>

来源

2017-10-06 Sarvin

如果您从HTML中删除[机器可检测错误]（https://validator.nu），这将有所帮助。 – Quentin

这与colspan无关。该colspan工作正常。这不是“直线”，因为你的列是不同的大小。如果你想让它们具有相同的尺寸，你需要指定宽度。 – Liam

你检查了我的代码吗？ –

如果您正在使用引导那么它会自动工作，但下面的代码是100％适合你

<table border="5"> 
 
     <tr> 
 
     <td colspan="4" align="center" style="width: 100%;">Colspan = “4”</td> 
 
     </tr> 
 
     <tr> 
 
     <td rowspan="3" colspan="1" style="width: 25%;"> col1 </td> 
 
     <td rowspan="3" colspan="1" style="width: 25%;"> col2 </td> 
 
     <td rowspan="3" colspan="1" style="width: 25%;"> col3 </td> 
 
     <td rowspan="3" colspan="1" style="width: 25%;"> col4 </td> 
 
     </tr> 
 
     <tr></tr> 
 
     <tr></tr> 
 
     <tr> 
 
     <td colspan="2" style="width: 50%;"> colspan = 2 </td> 
 
     <td colspan="2" style="width: 50%;"> colspan = 2 </td> 
 
     </tr> 
 
     <tr> 
 
     <td colspan="3" style="width: 75%;"> colspan = 3</td> 
 
     <td style="width: 25%;"> colspan = 1 </td> 
 
     </tr> 
 
    </table>

来源

2017-10-06 13:21:07

我的意思是这个工作，但它是迄今为止最不优雅的解决方案。正如你可以用字面上的一行来解决这个问题。 – Liam

td{ 
 
    min-width:100px; 
 
    text-align: center; 
 
}

<table border="5" width="400" height="400" table-layout="auto"> 
 
    <tr> 
 
    <td colspan="4" align="center">Colspan = “4”</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td rowspan="3" colspan="1"> col1 </td> 
 
    <td rowspan="3" colspan="1"> col2 </td> 
 
    <td rowspan="3" colspan="1"> col3 </td> 
 
    <td rowspan="3" colspan="1"> col4 </td> 
 

 
    </tr> 
 

 
    <tr></tr> 
 
    <tr></tr> 
 
    <tr> 
 
    <td colspan="2"> colspan = 2 </td> 
 
    <td colspan="2"> colspan = 2 </td> 
 
    </tr> 
 

 
    <tr> 
 
    <td colspan="3"> colspan = 3</td> 
 
    <td> colspan = 1 </td> 
 
    </tr> 
 
</table>

应设置表min-width。

说明

解释之前，我不擅长英语，所以如果你无法理解我的解释，请回复。

你想制作相同的width每个表的td。

而你的表width是400, column是4。

所以，每个column的width被设置为100px。

这是导致你应该设置min-width: 100px

来源

2017-10-06 13:12:50 zynkn

非常感谢。这就像一个魅力。我所遵循的书并未指定最小宽度。不明白为什么代码适合他们 – Sarvin

@Sarvin这是我的荣幸:)但我认为'宽度：25％'是更好的解决方法。 – zynkn

-1

用波纹管我刚才说的cellpadding = 0和CELLSPACING = 0，改变边界= 1

<table cellpadding="0" cellspacing="0" border="1" width="400" height = "400" table-layout = "auto"> 
 
     <tr> 
 
      <td colspan = "4" align="center">Colspan = “4”</td> <!--First row of the table-->  
 
     </tr> 
 
     
 
     <tr> 
 
      <td rowspan ="3" colspan = "1" > col1 </td> 
 
      <td rowspan ="3" colspan = "1"> col2 </td> 
 
      <td rowspan ="3" colspan = "1"> col3 </td> <!--Second group of rows of the table consisting 3 rows--> 
 
      <td rowspan ="3" colspan = "1"> col4 </td> 
 
     
 
     </tr> 
 
     
 
     <tr></tr> <!--occupied by the second group of rows of the table--> 
 
     <tr></tr> <!--occupied by the second group of rows of the table--> 
 
     
 
     <tr> 
 
      <td colspan = "2"> colspan = 2 </td> <!--3rd row which should contain 2 
 
               equal columns--> 
 
      <td colspan ="2" > colspan = 2 </td> 
 
     </tr> 
 
     
 
     <tr> 
 
      <td colspan="3"> colspan = 3</td> <!--4th row of which the first should 
 
              contain 3 cols and the second col is 1--> 
 
      <td > colspan = 1 </td> 
 
     </tr> 
 
     </table>

来源

2017-10-06 13:13:46 sheraz

产生相同的结果 – Liam

@liam解释我。对于矿码有些相同..与问题相比有不同的结果。因为cellpadding和cellspacing在表格上生成空间和填充我已添加这些属性也改变了边框宽度。 – sheraz

我已经添加了片段（再次）按运行代码。它看起来和问题中的一样。问题是cols的宽度，而不是边界等。 – Liam

没有什么不对您的colspan attributes. A colspan simply says this columns should be x columns wide in relation to the other columns in this table。

此属性包含一个非负整数值，指示单元格扩展的列数为。它的默认值是1的值高于1000将被视为不正确的，将被设置为默认值（1）

这并不是说一列有多宽。您需要指定您希望列间距均匀。你可以specify a width in pixels。这样做的缺点是，如果你的桌子变大了，它就不会再平等了。

一个更好的解决方案就是说你期望标准列的宽度为25％（100％/ 4）。你可以做到这一点使用CSS：

td{width:25%}

<table border="5" width="400" height = "400" table-layout = "auto"> 
 
\t <tr> 
 
     <td colspan = "4" align="center">Colspan = “4”</td> <!--First row of the table-->  
 
    </tr> 
 
    
 
    <tr> 
 
     <td rowspan ="3" colspan = "1" > col1 </td> 
 
     <td rowspan ="3" colspan = "1"> col2 </td> 
 
     <td rowspan ="3" colspan = "1"> col3 </td> <!--Second group of rows of the table consisting 3 rows--> 
 
     <td rowspan ="3" colspan = "1"> col4 </td> 
 
     
 
    </tr> 
 
    
 
    <tr></tr> <!--occupied by the second group of rows of the table--> 
 
    <tr></tr> <!--occupied by the second group of rows of the table--> 
 

 
    <tr> 
 
     <td colspan = "2"> colspan = 2 </td> <!--3rd row which should contain 2 
 
              equal columns--> 
 
     <td colspan ="2" > colspan = 2 </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td colspan="3"> colspan = 3</td> <!--4th row of which the first should 
 
             contain 3 cols and the second col is 1--> 
 
     <td > colspan = 1 </td> 
 
    </tr> 
 
    </table>

注意：虽然你的一些行有不超过4列25％仍然有效，因为该浏览器将添加合并单元格行了计算合并单元格宽度，因此2的宽度为50％，等等。

来源

2017-10-06 13:25:27 Liam

希望我可以将它标记为另一个答案！非常感谢 – Sarvin

HTML表，合并单元格问题

回答

相关问题