Manejo receptivo de tablas en Twitter Bootstrap

84

Cuando el ancho de una tabla excede el ancho del tramo, como en esta página: http://jsfiddle.net/rcHdC/

Verá que el contenido de la tabla está fuera del span.

¿Cuál sería el mejor método para atender este caso?

html twitter-bootstrap css Ryan
fuente
que te gustaría que pasara?
cimmanon

Respuestas:

153

Bootstrap 3 ahora tiene tablas responsivas listas para usar. ¡Hurra! :)

Puedes consultarlo aquí: https://getbootstrap.com/docs/3.3/css/#tables-responsive

Agregue un <div class="table-responsive">alrededor de su mesa y debería estar listo para comenzar:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Para que funcione en todos los diseños, puede hacer esto:

.table-responsive
{
    overflow-x: auto;
}
Leniel Maccaferri
fuente
7
Pero solo se aplica a dispositivos pequeños (menos de 768px): S Fuente: getbootstrap.com/css/#tables-responsive
VSP
1
Para habilitar esto en diseños de todos los tamaños, puede eliminar los estilos receptivos del bloque 768 en el archivo foundation_and_overrides.css.scss. Algo como `` `.table-responsive {width: 100%; overflow-y: oculto; overflow-x: desplazamiento; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: toque; } ``
genkilabs
3
@ ase69s revisa mi respuesta actualizada. Justo ahora lo necesitaba en una mesa con muchas columnas. Agregar overflow-x: autoun CSSarchivo personalizado hace el truco para diseños de pantalla más grandes.
Leniel Maccaferri
Es posible que desee agregar el borde en esa definición de estilo, también, por coherencia:border: 1px solid #dddddd;
ptim
2
También es posible que desee agregar .table-responsive td, .table-responsive th { white-space:nowrap; }para asegurarse de que las celdas no se encojan automáticamente y agreguen saltos de línea.
rybo111
18

Hay muchas cosas diferentes que puede hacer cuando se trata de tablas receptivas.

Personalmente, me gusta este enfoque de Chris Coyier:

Puedes encontrar muchas otras alternativas aquí:

Si puede aprovechar Bootstrap y obtener algo rápidamente, simplemente puede usar los nombres de clase ".hidden-phone" y ".hidden-tablet" para ocultar algunas filas, pero este enfoque podría ser el mejor en muchos casos. Más información (consulte "Clases de utilidad receptiva"):

Luis Evrythng
fuente
5
+1 para el Coyer Link. Lo he usado en el pasado con gran efecto.
Fetchez la vache
Sí, la solución de Chris Coyer es muy clara. Mucho más agradable que el proporcionado por bootstrap o zurbfoundation (simplemente agregan desplazamiento horizontal).
Adrien Be
A partir de ahora, enero de 2016, el material de respuesta de Coyier y otros tiene entre 5 y 6 años, antes de que todos comenzaran a usar Twitter Bootstrap.
Andrew Koper
1

Si está utilizando Bootstrap 3 y Less, puede aplicar las tablas de respuesta a todas las resoluciones actualizando el archivo:

tables.less

o sobrescribiendo esta parte:

@media (max-width: @screen-xs) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    overflow-x: scroll;
    border: 1px solid @table-border-color;

    // Tighten up spacing and give a background color
    > .table {
      margin-bottom: 0;
      background-color: #fff;

      // Ensure the content doesn't wrap
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th,
          > td {
            white-space: nowrap;
          }
        }
      }
    }

    // Special overrides for the bordered tables
    > .table-bordered {
      border: 0;

      // Nuke the appropriate borders so that the parent can handle them
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th:first-child,
          > td:first-child {
            border-left: 0;
          }
          > th:last-child,
          > td:last-child {
            border-right: 0;
          }
        }
        > tr:last-child {
          > th,
          > td {
            border-bottom: 0;
          }
        }
      }
    }
  }
}

Con:

@media (max-width: @screen-lg) {
  .table-responsive {
    width: 100%;
...

Observe cómo cambié el valor de la primera línea @ screen-XX.

Sé que hacer que todas las tablas respondan puede que no suene tan bien, pero me pareció extremadamente útil tener esto habilitado para LG en tablas grandes (muchas columnas).

Espero que ayude a alguien.

Mauricio
fuente