0

私は現在、このコード
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;}

このテーブルの最初の 2 列を固定したいと思います。これどうやってするの？

4

1 に答える 1

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>
于 2012-12-12T20:56:39.230 に答える