Question

I currently have this code
HTML

<div class="table">
     <div class="header-row">        
        <div class="header-cell">First Name</div>
        <div class="header-cell">Last Name</div>

    @foreach (var item in Model.items)
    {
        <div class="header-cell">@item.Name</div>            
    }
</div>
@foreach (var user in Model.collections)
{
    <div class="row">

            <div class="cell">
                @user.FirstName
            </div>
            <div class="cell">
                @user.LastName
            </div>

        @foreach (var iteminfo in Model.FullInfo)
        {
            <div class="cell">
                @iteminfo.Info
            </div>                  
        }
    </div>
}
</div>

CSS

.table { display: table; }
.header-row, .row { display: table-row; }
.header-cell,.header-cell-frozen, .cell { display: table-cell;}

I would like to freeze the first two columns of this table. How can I do this?

Answer 1

You have to put 3-rd and other cols in separate <div style="overflow:scroll;width:300px">
Replace 300px with fixed size of your choice.

If you want to fix fist to columns relative to browser window you have to use position:fixed

Try this

<!-- FROZEN --->
<div class="table" style="float:left;">
    <div class="header-row">
        <div class="header-cell">First Name</div>
        <div class="header-cell">Last Name</div>

        @foreach (var user in Model.collections)
        {
            <div class="row">
                <div class="cell">@user.FirstName</div>
                <div class="cell">@user.LastName</div>
            </div>
        }
    </div>
</div>
<!-- SCROLLABLE --->
<div class="table" style="overflow: scroll;width:300px;float:left">
    <div class="header-row">
        @foreach (var item in Model.items)
        {
            <div class="header-cell">@item.Name</div>            
        }
    </div>
    @foreach (var user in Model.collections)
    {
        <div class="row">
            @foreach (var iteminfo in Model.FullInfo)
            {
                <div class="cell">
                    @iteminfo.Info
                </div>                  
            }
        </div>
    }
</div>