Mis tablas se muestran bien en el escritorio, pero una vez que trato de ver la versión móvil, mi tabla termina siendo demasiado ancha para la pantalla del dispositivo móvil. Estoy usando un diseño receptivo.
¿Cómo puedo establecer el ancho de la mesa para la vista móvil? ¿Qué otras alternativas existen para presentar datos tabulares en vistas móviles usando Bootstrap?
Respuestas:
Bootstrap 3 presenta tablas receptivas :
<div class="table-responsive">
<table class="table">
...
</table>
</div>Bootstrap 4 es similar, pero con más control a través de algunas clases nuevas :
... sensible en todas las ventanas gráficas ... con
.table-responsive. O elija un punto de interrupción máximo con el que tener una tabla receptiva utilizando.table-responsive{-sm|-md|-lg|-xl}.
Gracias a Jason Bradley por dar un ejemplo:
table-responsiveclase? Bootstrap docs dice "para hacer que se desplacen horizontalmente", pero no noto una diferencia relacionada con el desplazamiento. La única diferencia que noto es que la tabla tiene bordes en el exterior cuando está debajo de un cierto tamaño de pantalla ( como se ve en el ejemplo ).
.table-responsivea la tabla en sí (por ejemplo <table class="table table-responsive">), en lugar de envolver la tabla .table-responsive, lo que incluso señaló en su ejemplo.
hidden-*en las direcciones de correo electrónico tdde las columnas que desea ocultar getbootstrap.com/docs/3.3/css/#responsive-utilities
También puede considerar probar uno de estos enfoques, ya que las tablas más grandes no son exactamente amigables en dispositivos móviles, incluso si funciona:
http://elvery.net/demo/responsive-tables/
Soy partidario de 'No More Tables', pero eso obviamente depende de su aplicación.
Todas las tablas dentro de bootstrap se estiran de acuerdo con el contenedor en el que se encuentran. Puede colocar sus tablas dentro de un .spanelemento para controlar el tamaño. Esta pregunta SO puede ayudarte
¿Por qué las tablas de Twitter Bootstrap siempre tienen un ancho del 100%?