title: how to make horizontal scrollbar in dataview
body: <p>I have a primeng tableview currently styled with width: 100% and all the columns width is set in percentages, so if the data is long - the data is wrapped and there is a line break which makes the line becomes higher. 
  I would like that in case a <strong>specific</strong> column has a data with lots of characters, an horizontal scroll-bar will appear at the bottom of the table view - allow us to scroll. How can I do it using css.
  Here is my  (<strong>simplified</strong>):</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="table-view-container"&gt;
      &lt;p-dataView class="main-module-list" [rows]="pageSize" [totalRecords]='totalRecords'
          [paginator]="true" paginatorPosition="bottom"  [lazy]="true" (onLazyLoad)="loadData($event)"&gt;
          &lt;p-header&gt;
              &lt;div class="ui-g custom"&gt;
                  &lt;div class="ui-g20" data-field=''&lt;/div&gt;
                  &lt;div class="ui-g30" data-field='' &lt;/i&gt;&lt;/div&gt;
                  &lt;div class="ui-g40" data-field='' &lt;/div&gt;
                  &lt;div class="ui-g10" data-field=''&lt;/i&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/p-header&gt;
          &lt;ng-template let-result pTemplate="listItem"&gt;
              &lt;div class="list-item" &gt;
                  &lt;div class="ui-g scroll custom"&gt;
                  &lt;div class="row ui-g20"&gt;{}&lt;/div&gt; 
                  &lt;div class="row ui-g30"&gt;{&lt;/div&gt;
                  &lt;div class="row ui-g40"&gt;{}&lt;/div&gt; 
                  &lt;div class="row ui-g10"&gt;{{}&lt;/div&gt; //In case that this column has long data, make the scrolbar
              &lt;/div&gt;
          &lt;/ng-template&gt;
      &lt;/p-dataView&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>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;
          }
      }
  }
  </code></pre>