Динамическая высота строки в таблице HTML - PullRequest
1 голос
/ 06 января 2012

У меня есть таблица на моей странице.В зависимости от выбора в моей таблице может быть 4 или 5 строк.Я хочу, чтобы высота моего верхнего ряда была точной независимо от того, есть ли у меня 4 или 5 рядов.В настоящее время это увеличивает размер моей верхней строки, когда в моей таблице 4 строки.Любые идеи, как сделать верхний ряд с одинаковой высотой каждый раз?

Вот моя таблица:

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

1 Ответ

0 голосов
/ 07 января 2012

Я убрал элемент высоты со стола, и он сработал для меня.Спасибо !!!!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...