html - 如何在数据 View 中制作水平滚动条

Question

我有一个当前样式为 width: 100% 的 primeng tableview，并且所有列的宽度都以百分比设置，所以如果数据很长 - 数据会被换行并且有一个换行符，这会使行变高。我希望如果特定 列的数据包含很多字符，则水平滚动条将出现在表格 View 的底部 - 允许我们滚动。我怎样才能使用CSS来做到这一点。这是我的(简化):

<div class="container">
<div class="table-view-container">
    <p-dataView class="main-module-list" [rows]="pageSize" [totalRecords]='totalRecords'
        [paginator]="true" paginatorPosition="bottom"  [lazy]="true" (onLazyLoad)="loadData($event)">
        <p-header>
            <div class="ui-g custom">
                <div class="ui-g20" data-field=''</div>
                <div class="ui-g30" data-field='' </i></div>
                <div class="ui-g40" data-field='' </div>
                <div class="ui-g10" data-field=''</i></div>
            </div>
        </p-header>
        <ng-template let-result pTemplate="listItem">
            <div class="list-item" >
                <div class="ui-g scroll custom">
                <div class="row ui-g20">{}</div> 
                <div class="row ui-g30">{</div>
                <div class="row ui-g40">{}</div> 
                <div class="row ui-g10">{{}</div> //In case that this column has long data, make the scrolbar
            </div>
        </ng-template>
    </p-dataView>
</div>

CSS:

div.container
{
    width: auto;
    display: block;

    margin: auto;
    border: 1px solid gray;
    div.data-container
    {
        padding:2vw 2vw 1vw 2vw;
    }

    div.table-view-container
    {
        ::ng-deep p-dataView
        {
            p-header
            {
                div.ui-g
                {
                    margin-left: 17px; //For the left scrolbar
                }
            }
            div.ui-dataview.ui-widget.ui-dataview-list
            {
                div.ui-dataview-content
                {
                    overflow-y: auto;
                }
            }
        }
    }
}
p-dataview
{
    div.ui-g.custom
    {
        box-sizing: border-box;
        padding: .5em  0;
        div.row
        {
            text-align: center;
        }
        div.ui-g10
        {
            width: 10%        
        }

        div.ui-g20
        {
            width: 20%;
        }
        div.ui-g30
        {
            width: 30%;
        }
        div.ui-g40
        {
             width: 40%;
        }
        div.auto-width
        {
            width: auto;
        }
    }
}

Answer 1

将 DataGrid 放在 ScrollViewer 标签内，然后设置高度、宽度等。代码示例如下所示。

 <Grid>
           <GroupBox>
               <StackPanel Orientation="Horizontal" >
                   <ScrollViewer  Width="500" ScrollViewer.VerticalScrollBarVisibility="Auto" Foreground="Red">
                       <DataGrid  HorizontalAlignment="Center" AutoGenerateColumns="False" >
                           <DataGrid.Columns>
                           </DataGrid.Columns>
                       </DataGrid>
                   </ScrollViewer>
               </StackPanel>
           </GroupBox>

       </Grid>