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:
