Question

我试图创建一个这样的表

这是我运行HTML代码时得到的结果

即使在设置了colspan后，所有列的列宽也不相同。可能＆＃34; colspan＆＃34;属性并不是按照我的期望工作的。我做错了什么？

我的代码：

＆＃13;

<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>

＆＃13;

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。

<强>解释

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

您想要为每个表width制作相同的td。

您的表格width为400，column为4。

因此，每个column的{{1}}都设置为width。

结果你应该设置100px

Answer 2

如果您使用的是bootstrap，那么它会自动运行，但是代码下面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宽度，所以2的colspan宽度为50％等等。

Answer 4

使用过，我刚刚添加了cellpadding = 0和cellspacing = 0并更改了border = 1

＆＃13;

    <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>

＆＃13;

HTML表，colspan问题

4 个答案: