twitter-bootstrap - descargar - bootstrap releases
Bootstrap: mesa de fluido demasiado ancha para ventana (6)
Aplicando el estilo = "overflow: auto;" funcionó bien para mí
Estoy trabajando en un proyecto usando Twitter Bootstrap. Tenemos una tabla que tiene muchas columnas y va a ser más grande que la ventana del navegador casi todas las veces.
Esto es lo que sucede a la derecha:
El borde de la tabla permanece en la ventana del navegador, mientras que el contenido de la tabla no. Si me desplazo, los bordes permanecen donde están, no "siguen" la ventana del navegador.
Puedes ver el problema en este jsfiddle . Funciona en Safari, no en Chrome o Firefox.
El diseño es así:
<body>
<div class=''container-fluid''>
<div class=''row-fluid''>
<div class=''span1''>
... menusidebar here...
</div>
<div class=''span11''>
<table class="table table-striped table-bordered" style="white-space: nowrap">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
Espero que puedas ayudarme. Si necesita más información, solo pregunte, estaré encantado de proporcionarle.
Esta es una aplicación Rails 3.2, que usa la gema bootstrap-sass en la versión 2.2.1.1 (el problema aparece también en 2.2.2.0). Los tres primeros números reflejan la versión bootstrap.
Bootstrap tiene el siguiente estilo aplicado a las tablas:
table {
max-width: 100%;
}
Si reemplaza esa propiedad en su hoja de estilo personalizada, es de esperar que resuelva el problema. Cambiarlo a ''ninguno'' debería funcionar.
table {
max-width: none;
}
Encontré solución en algún lugar de internet ...
table {table-layout:fixed}
Resuelve problemas en Firefox e IE, con bootstrap 2 y 3.
Esta fue la única solución que me funcionó ...
.table { max-width: none; table-layout: fixed; word-wrap: break-word; }
Puede aplicar el estilo = "overflow: auto;" para poner una barra de desplazamiento horizontal en su mesa. Por lo tanto, el diseño seguirá siendo sensible. Sigue el código:
.table-scrollable{
overflow: auto;
}
Y úsalo en tu div:
<div class=''span11 table-scrollable''>
Si está en Bootstrap 3, otro enfoque es envolver su mesa en un
<div class="table-responsive"><table>...</table></div>
Esto hace que la mesa sea receptiva.