Bootstrap 4 таблица адаптивного прокрутки

Question

Использование Bootstrap 4. У меня есть адаптивная таблица, в которой я хотел бы создать прокручиваемый объект.Таблица выглядит следующим образом:

<div class="table-responsive">
  <table class="table table-striped table-hover custom-table text-nowrap">
    <thead>
      <tr>
        <th>row1</th>
        <th>row2</th>
        <th>row2</th>
      </tr>
    </thead>
    <tbody>
      <!-- some rows -->
    </tbody>
  </table>

Чтобы прокрутить tbody, я добавил в таблицу класс scss .custom-table, он выглядит следующим образом

.custom-table {
  tbody {
     height: 50px;
     overflow-y: auto;
     width: 100%;
     display: block;
  }
}

Однако этот стиль не работаетправильно.Весь контент в tbody перемещается влево.У меня есть рабочий JSFiddle пример.Что я сделал не так?

Answer 1

Пожалуйста, проверьте ниже, я предпочитаю использовать flexbox. Я также использую префиксы -webkit и -ms для большей кросс-браузерной совместимости

  tbody , thead {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  tr {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  th,td {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
  }

  tbody {
     height: 50px;
     overflow-y: auto;
  }

  thead {
    padding-right: 20px;
  }

Я установил padding-right на thead из-за полосы прокрутки на tbody.

Answer 2

Вам это нравилось?

Измените свой CSS, как это

.custom-table> tbody {
    display:block;
    height:50px;
    overflow:auto;
}
.custom-table> thead, tbody tr {
    display:table;
    width:100%;         
}
.custom-table> thead {
    width:   100%   
}
.custom-table {
    width:100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="table-responsive">
  <table class="table table-striped table-hover custom-table text-nowrap">
    <thead>
      <tr>
        <th>row1</th>
        <th>row2</th>
        <th>row2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>text1</td>
        <td>text2</td>
        <td>text3</td>
      </tr>
      <tr>
        <td>text4</td>
        <td>text5</td>
        <td>text6</td>
      </tr>
      <tr>
        <td>text7</td>
        <td>text8</td>
        <td>text9</td>
      </tr>
    </tbody>
  </table>
</div>