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:

http://www.quirksmode.org/css/display.html

http://www.quirksmode.org/css/display.html#table

http://developer.practicalecommerce.com/articles/1941-CSS-display-table-display-table-row-and-display-table-cell-