Question

我一直想知道表格单元格中的百分比宽度如何在HTML中工作。

案例1：未指定表格宽度，单行和列未获得全空间

<table>
    <tr>
        <td width="25%">mango</td>
        <td width="25%"">apple</td>
    </tr>
</table>

案例2：未指定表格宽度，单行和列全空间

<table>
    <tr>
        <td width="50%">mango</td>
        <td width="50%"">apple</td>
    </tr>
</table>

案例3：未指定表格宽度，单行和列的空间超过100％

<table>
    <tr>
        <td width="50%">mango</td>
        <td width="50%"">apple</td>
        <td widht="100%">guava</td>
    </tr>
</table>

案例4：未指定表格宽度，指定了多行且列提供以下百分比配置

<table>
    <tr>
        <td width="33%">mango</td>
        <td width="33%"">apple</td>
        <td widht="33%">guava</td>
    </tr>
    <tr>
        <td width="50%">papaya</td>
        <td width="50%">pomengrante</td>
    </tr>
</table>

他们的输出我无法关联，请在此帮助我

Answer 1

单元格将与其表格相关联，但它们也需要占据表格宽度的100％。所以这使你的case1无法正常工作。它会把它分成50％。但是你设置它的情况会起作用，因为它是表宽度的100％。

Demo

<table>
    <tr>
        <td width="20%">mango</td>
        <td width="80%">apple</td>
    </tr>
</table>

如果你需要25-25的东西，那么也许你应该考虑使用div。

此外，您的最后一个案例将无效，因为您需要在表格中使用相同数量的单元格。

Answer 2

百分比将起作用取决于任何屏幕分辨率等于100％因此您将百分比除以您的需求测量百分比示例如下所示，（在表tr宽度（100％）=（添加td（宽度））

＆＃13;

      <table style="width:100%;" border="1">
      <tr>
       <td wdith="50%">Mango</td>
       <td wdith="50%">Lemon</td>
      </tr> 
   <!--You Given For 1st Record measurements Then Automatically Adjested 2nd Record Also Depend Upon 1st Record-->
      <tr>
       <td>some Item</td>
       <td>some Item</td>
     </tr>
    </table>
      <!--This Is Another Type Of Table-->
      <h3>This Is Another Type Of Table</h3>
       <table style="width:100%;" border="1">
       <tr>
        <td wdith="33%">Mango</td>
        <td wdith="34%">Lemon</td>
        <td wdith="33%">Something</td>
       </tr> 
   <!--You Given For 1st Record measurements Then Automatically Adjested 2nd Record Also Depend Upon 1st Record-->
       <tr>
       <td>some Item</td>
       <td>some Item</td><td>some Item</td>
       </tr>
      </table>
      <h3>This Is Another Type Of Table</h3>
      <table style="width:100%;" border="1">
      <tr>
      <td wdith="25%">Mango</td>
      <td wdith="25%">Lemon</td>
      <td wdith="25%">Something</td>
      <td wdith="25%">Something</td>
      </tr> 
      <!--You Given For 1st Record measurements Then Automatically Adjested 2nd Record Also Depend Upon 1st Record-->
      <tr>
      <td>some Item</td>
     <td>some Item</td>
     <td>some Item</td>
     <td>some Item</td>
     </tr>
    </table>

＆＃13;

表格单元格中的百分比宽度如何在HTML中起作用？

2 个答案: