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