Замораживание нескольких столбцов таблицы с использованием div

Question

У меня сейчас есть этот код
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;}

Я хотел бы заморозить первые два столбца этой таблицы. Как я могу это сделать?

Answer 1

Вы должны поместить 3-е и другие столбцы в отдельные <div style="overflow:scroll;width:300px">замещать 300px с фиксированным размером на ваш выбор.

Если вы хотите зафиксировать кулак в столбцах относительно окна браузера, вы должны использовать position:fixed

Попробуй это

<!-- 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>