Mesa de desplazamiento horizontal y vertical en Bootstrap

Question

Jan 11, 2018, 11:59 PM

javascript jquery html css twitter-bootstrap

Mesa de desplazamiento horizontal y vertical en Bootstrap

Estoy diseñando una tabla usando bootstrap, una receptiva. Hasta que tenga menos no. de columnas, fue bueno. Con encabezado fijo, funcionaba bien.

JSFIDDLE VERTICAL SCROLLBAR

Ahora, necesitaba más de 20 columnas en la tabla y también debería poder desplazarse horizontalmente.

JSFIDDLE HORIZONTAL SCROLLBAR

Traté de hacer que funcionen juntos, para una tabla de encabezado fijo para desplazamiento vertical y desplazamiento horizontal con encabezado desplazable.

Intenté esto:

.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>

Acabo de agregar filas duplicadas para que la tabla se pueda desplazar. ¿Cómo hacer que una tabla se pueda desplazar verticalmente (con encabezado fijo) y horizontal (con encabezado desplazable)?

Deja tu comentario