HTML表格中行的動態高度

我在我的頁面上有一個表格。根據選擇，我可以在我的桌子上放4或5行。無論我有4行還是5行，我都希望我的頂行高度準確無誤。目前，當我的表格中有4行時，它增加了我最上面一行的大小。任何想法如何使每次相同高度的頂行？HTML表格中行的動態高度

這裏是我的表：

<table style="vertical-align:top; border-width:1px; border-style:solid; width:565px; height:155px; color:Black; font-size:8pt; left:19%; top:0px; position:absolute; border-color:Blue;">  
    <tr style="height:30px;">       
     <td align="left" style="width:190px; font-size:9pt; font-weight:bold; height:30px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@(Model.PlanSummary.Header)</td> 
     <td style="background-color:Red; width:130px; color:White; text-align:center; height:30px;">@(Model.PlanSummary.PlanTypes_1)</td> 
     <td align="center" style="background-color:Red; width:130px; color:White; height:30px; text-align:center; height:30px;">@(Model.PlanSummary.PlanTypes_2)</td> 
     <td align="center" style="background-color:Red; width:130px; color:White; height:30px; height:30px;">@(Model.PlanSummary.PlanTypes_3)</td> 
    </tr> 
    @{ 
     if(planName == "Business User") 
     { 
      <tr style="font-size:7pt;"> 
       <td align="left" style="width:190px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@(Model.PlanSummary.PlanUsersHeader) </td> 
       <td align="center" style="width:120px;"> @(Model.PlanSummary.PlanUsersDetail1) </td> 
       <td align="center" style="width:120px;"> @(Model.PlanSummary.PlanUsersDetail2) </td>    
       <td align="center" style="width:120px;"> @(Model.PlanSummary.PlanUsersDetail3) </td> 
      </tr> 
     }   
    } 
    <tr style="font-size:7pt;"> 
     <td align="left" style="width:190px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@(Model.PlanSummary.PlanPriceHeader)</td> 
     <td align="center"> @(Model.PlanSummary.PlanPriceDetail1) </td> 
     @{ 
      if(planName == "Business User") 
      { 
       <td align="center" style="width:120px; font-size: 9pt;"> 
        @Html.DropDownList("RPUserPricingList", (IEnumerable<SelectListItem>)Model.PlanSummary.UserPricingList, new { style = "font-family: Verdana; font-size: 6pt; text-align:center; width:100px;" })      
       </td> 
       <td align="center" style="width:120px; font-size: 9pt;"> 
        @Html.DropDownList("RPCompanyPricingList", (IEnumerable<SelectListItem>)Model.PlanSummary.ComanyPricingList, new { style = "font-family: Verdana; font-size: 6pt; text-align:center; width:90px;" })      
       </td> 
      } 
      else 
      { 
       <td align="center"> @(Model.PlanSummary.PlanPriceDetail2) </td>  
       <td align="center"> @(Model.PlanSummary.PlanPriceDetail3) </td> 
      } 
     }     
    </tr> 
    <tr style="font-size:7pt;"> 
     <td align="left" style="width:190px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@(Model.PlanSummary.PlanUnitCountHeader)</td> 
     <td align="center"> @(Model.PlanSummary.PlanUnitCountDetail1) </td> 
     <td align="center"> @(Model.PlanSummary.PlanUnitCountDetail2) </td> 
     <td align="center"> @(Model.PlanSummary.PlanUnitCountDetail3) </td> 
    </tr>  
    <tr> 
     <td></td> 
     @{ 
      if(planName == "Personal") 
      { 
        <td align="center"><button style="background-image:url('Content/Images/ShortRedButton.png');color:White;width:86px;height:24px;font-size:6pt;">@(Model.PlanSummary.Btn1)</button></td> 
        <td align="center"><button style="background-image:url('Content/Images/ShortRedButton.png');color:White;width:86px;height:24px;font-size:6pt;">@(Model.PlanSummary.Btn2)</button></td> 
        <td align="center"><button style="background-image:url('Content/Images/ShortRedButton.png');color:White;width:86px;height:24px;font-size:6pt;">@(Model.PlanSummary.Btn3)</button></td> 
      } 
      else 
      { 
       <td align="center"><button style="background-image:url('Content/Images/ShortRedButton.png');color:White;width:86px;height:24px;font-size:6pt;">@(Model.PlanSummary.Btn1)</button></td> 
       <td align="center"><button style="background-image:url('Content/Images/ShortRedButton.png');color:White;width:86px;height:24px;font-size:6pt;">@(Model.PlanSummary.Btn2)</button></td> 
       <td align="center"> 
        <button style="background-image:url('Content/Images/LongRedButton.png');color:White;width:96px;height:26px;font-size:6pt;">@(Model.PlanSummary.Btn3)</button>        
        <br /> 
        <button style="background-image:url('Content/Images/LongRedButton.png');color:White;width:96px;height:26px;font-size:6pt;">@(Model.PlanSummary.Btn4)</button> 
       </td> 
      }    
     }   
    </tr> 
</table>

來源

2012-01-05 Vivek Patel

我從表def刪除高度元素。它的工作。 – 2012-01-05 22:45:28

添加這個答案並接受它。回答你自己的問題不僅可以，它是受到鼓勵的。答案比評論更容易看到。此外，這將標記爲已解決，因此它不會顯示在「未答覆」列表中。 – ThinkingStiff 2012-01-06 00:33:51

會做。謝謝！！！！ – 2012-01-06 22:50:22

我從表中刪除高度元素，它爲我工作。謝謝！

來源

2012-01-06 22:22:10

HTML表格中行的動態高度

回答

相關問題