HTML表格，colspan问题

Question

我正在尝试创建一个这样的表

这就是我运行 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>

Answer 1

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。

说明

在解释之前，我英文不好，所以如果你看不懂我的解释，请回复。

您想为每个表的td 设置相同的width。

你的表width 是400，column 是4。

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

你应该设置min-width: 100px的结果

Answer 2

如果您使用的是引导程序，那么它会自动运行，但下面的代码 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>

Answer 3

您的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">
	<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% 仍然有效，因为浏览器会将 colspan 行添加到计算 colspan 宽度，因此 colspan 为 2 的宽度为 50%，依此类推。

Answer 4

使用波纹管我刚刚添加了 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>