Как показать полосу прокрутки внизу и сделать высоту таблицы как авто? - PullRequest
Новая
       56

Как показать полосу прокрутки внизу и сделать высоту таблицы как авто?

0 голосов
/ 13 апреля 2020

Я написал следующее css, которое работает, как и ожидалось, на моем ноутбуке. Но при использовании монитора большего размера я вижу пустое пространство после конца таблицы. 

  .wrapper{
    width:auto;
    height: 500px;
    overflow-x: scroll;
    overflow-y: scroll;
  }

Когда я использую overflow :auto;, вертикальная полоса прокрутки полностью удалена, и чтобы увидеть горизонтальную полосу прокрутки, я должен прокрутить полностью вниз

html выглядит следующим образом: 

  <div class="wrapper">
    <table id="myTable" datatable="ng" [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" dt-instance="dtInstance" class="table table-striped table-bordered display nowrap
    table-sm row-border hover" width="100%">
      <thead>
      <tr>
        <th style="min-width: 120px">hostName</th>
        ...
      </tr>
      </thead>
      <tbody>
      <tr style="text-align: left; word-break: break-all;">
        <td>value</td>
        ...
      </tr>
      </tbody>
    </table>
  </div>

Если я сделаю height: auto, то горизонтальная полоса прокрутки идет в самом низу и не отображается вверху страницы, а вертикальная полоса прокрутки имеет вид больше не прокручивается.

Ответы [ 2 ]

0 голосов
/ 14 апреля 2020

Попробуйте, указав 100% высоты в тегах body и html: 

html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.wrapper{
  width: 100%;
  height: 100%;
  overflow-x: scroll;
  overflow-y: scroll;
}

Проверьте https://jsfiddle.net/oyzsvbw4/1/

0 голосов
/ 13 апреля 2020

Вместо использования «px» попробуйте использовать относительную единицу для высоты таблицы, например «vh» или «%»

...