NEWS

Wednesday, March 5, 2014

To replace htmltable with div using CSS

Issue:
How to get tabular like layout using div.

Solution:

There is an in-built display property support for this with CSS 2.1.
display: table;
display: table-row;
display: table-cell;

Having below CSS and html, we can achieve this:

CSS:

.tabular
{
    display: table;
}
.tabular-row
{
    display: table-row;
    position: relative;
    height: 26px;
}
.tabular-cell
{
    display: table-cell;
    height:25px
}

.tabular-cell-small
{
    display: table-cell;
    height:25px;
    width:50px
}

.tabular-cell-medium
{
    display: table-cell;
    height:25px;
    width:114px
}


CSHtml sample:

<div class="tabular">                   
                    <div class="tabular-row">
                        <span class="prBatchEditLabelbg tabular-cell">
                            <h2>@Html.GetLocalizedString("xxxxxxxxxxxx")</h2>                             
                        </span>   
                         <span class="tabular-cell">              
                             <a class="helpButton" title="@Html.GetLocalizedString("xxxxxxxxxxxxxxx")" href="#" tabindex="-1"></a>
                        </span>                                  
                    </div>
                    <div class="tabular-row">
                        <span class="xxxxxxxxxx tabular-cell-medium">
                            @Html.GetLocalizedString("xxxxxxx")
                        </span>
                         <span class="xxxxxxxxxx tabular-cell-small">                           
                        </span>
                         <span class="xxxxxxxxxxx tabular-cell-medium">
                            @Html.GetLocalizedString("xxxxxxxxxxxx")
                        </span>
                    
                    </div>
                    <div class="tabular-row">
                        <span class="xxxxxxxxxxxxxxxx tabular-cell">                      
                             @Html.DropDownListFor(model => model.SelectedAccountXXXXX, new SelectList(Model.AccountXXXXXXList, "Id", "Name", Model.SelectedAccountXXXXX), new { @id = "accountGroupList", datavaluerequired = "data-value-required", @class = "required", style = "width:175px" })
                        </span>   
                         <span class="xxxxxxxxxx tabular-cell-small">                           
                        </span>                
                        <span class="xxxxxxxxxxxxxxx tabular-cell">
                            @Html.DropDownListFor(model => model.SelectedBankXXXXXX, new SelectList(Model.BankXXXXList, "Id", "Name", Model.SelectedBankXXXX), new { @id = "bankList", datavaluerequired = "data-value-required", @class = "required", style = "width:175px" })
                        </span>
                        <span class="prBatchEditLabelbg tabular-cell-medium">                           
                        </span>          
                        <span class="tabular-cell-medium">
                             <button class="rounded">@Html.GetLocalizedString("prXXXXXX")</button>                                       
                        </span>
                    </div>              
             </div>



Reference:

10 comments: