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-rd和其他cols放在单独的<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>

使用div冻结多个表列

1 个答案: