Question

我有一个当前样式为primeng的tableview，其宽度设置为：100％，所有列的宽度均按百分比设置，因此，如果数据很长-数据被包装并且有一个换行符，使该行变高。我想如果特定列中的数据包含很多字符，则表格视图的底部会出现一个水平滚动条-让我们滚动。我如何使用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标签内，然后设置Height，Width等。代码示例如下所示。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<div class="d-flex">
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul style="width: max-content;" class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <li class="dropdown-item" href="#">Action</li>
      <li class="dropdown-item" href="#">
        <button class="btn btn-primary" type="button"> Something esle and something else</button>
      </li>
      <li class="dropdown-item" href="#">
       <img alt="" class="img-thumbnail img-fluid rounded" src="https://via.placeholder.com/50">
       <button class="btn btn-primary" type="button"> Something esle and something else</button>
  </li>
      <li class="dropdown-divider"></li>
      <li class="dropdown-item" href="#">
        <img alt="" class="img-thumbnail img-fluid rounded" src="https://via.placeholder.com/50">
        <span> Separated link and Separated link</span>
      </li>
    </ul>
  </div>
</div>

<hr>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul style="width: max-content;" class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <li class="dropdown-item" href="#">Action</li>
      <li class="dropdown-item" href="#">
        <button class="btn btn-primary" type="button"> Something esle and something else</button>
      </li>
      <li class="dropdown-item" href="#">
       <img alt="" class="img-thumbnail img-fluid rounded" src="https://via.placeholder.com/50">
       <button class="btn btn-primary" type="button"> Something esle and something else</button>
  </li>
      <li class="dropdown-divider"></li>
      <li class="dropdown-item" href="#">
        <img alt="" class="img-thumbnail img-fluid rounded" src="https://via.placeholder.com/50">
        <span> Separated link, Separated link and Separated link</span>
      </li>
    </ul>
  </div>

如何在数据视图中制作水平滚动条

1 个答案: