Tabela capaz de rolagem horizontal e vertical no Bootstrap

Question

Jan 11, 2018, 11:59 PM

javascript twitter-bootstrap jquery html css

Tabela capaz de rolagem horizontal e vertical no Bootstrap

Estou projetando uma tabela usando bootstrap, uma responsiva. Até que tenha menos não. de colunas, foi bom. Com cabeçalho fixo, estava funcionando bem.

Barra de rolagem vertical JSFIDDLE

Agora, eu exigi mais de 20 colunas na tabela e ela também deve ser capaz de rolar horizontalmente.

SCROLLBAR HORIZONTAL JSFIDDLE

Tentei fazê-los trabalhar juntos, para uma tabela de cabeçalho fixa para rolagem vertical e rolagem horizontal com cabeçalho capaz de rolagem.

Eu tentei isso:

.table-fixed thead {
  width: 97%;
}

.table-fixed tbody {
  height: 150px;
  overflow-y: auto;
  width: 100%;
}

.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
  display: block;
}

.table-fixed tbody td,
.table-fixed thead>tr>th {
  float: left;
  border-bottom-width: 0;
}

.table-fixed thead {
  width: 97%;
}

.table-fixed tbody {
  height: 230px;
  overflow-y: auto;
  width: 100%;
}

.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
  display: block;
}

.table-fixed tbody td,
.table-fixed thead>tr>th {
  float: left;
  border-bottom-width: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="panel panel-default table-responsive">
      <table class="table table-fixed">
        <thead>
          <tr>
            <th class="col-xs-1">S.No.</th>
            <th class="col-xs-1">Name</th>
            <th class="col-xs-1">Balance</th>
            <th class="col-xs-1">Action</th>
            <th class="col-xs-1">S.No.</th>
            <th class="col-xs-1">Name</th>
            <th class="col-xs-1">Balance</th>
            <th class="col-xs-1">Action</th>
            <th class="col-xs-1">S.No.</th>
            <th class="col-xs-1">Name</th>
            <th class="col-xs-1">Balance</th>
            <th class="col-xs-1">Action</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
          </tr>
          <tr>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
          </tr>
          <tr>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
          </tr>
          <tr>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
          </tr>
          <tr>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
          </tr>
          <tr>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
          </tr>
          <tr>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
          </tr>
          <tr>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Acabei de adicionar linhas duplicadas para tornar a tabela capaz de rolar. Como tornar uma tabela com rolagem vertical (com cabeçalho fixo) e horizontal (com cabeçalho com rolagem)?