Ecco un link JS Bin: http://jsbin.com/qiziyupo/4/edit?outputpannello di bootstrap con tavolo reattivo all'interno
La tabella reattivo non si restringe per adattarsi al pannello. Come posso risolvere questo?
EDIT: Sto cercando una soluzione in cui la tabella reattiva verrà ridimensionata per adattarsi all'interno del pannello, senza dover ingrandire il pannello.
La classe .table-responsive è progettato solo per essere sensibili su dispositivi mobili ...
Dalla documentazione Bootstrap 3.1.1 ...
Crea tabelle reattive avvolgendo qualsiasi .table in .table-responsive per farle scorrere orizzontalmente fino a piccoli dispositivi (sotto 768px). Per la visione con qualcosa più grande di 768px di larghezza, non si vedrà alcuna differenza in queste tabelle
Ma è possibile aggiungere la classe nel vostro CSS, senza la media query e ottenere la funzionalità in qualsiasi finestra.
Ma si noti che questo non si restringe al tavolo, dà solo una barra di scorrimento orizzontale ...
di seguito riportate le classi .table-responsive da Bootstrap senza la media query limitandola a 768px e al di sotto.
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
overflow-x: scroll;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
-webkit-overflow-scrolling: touch;
}
.table-responsive>.table {
margin-bottom: 0;
}
.table-responsive>.table>thead>tr>th,
.table-responsive>.table>tbody>tr>th,
.table-responsive>.table>tfoot>tr>th,
.table-responsive>.table>thead>tr>td,
.table-responsive>.table>tbody>tr>td,
.table-responsive>.table>tfoot>tr>td {
white-space: nowrap;
}
ci sono un paio di regole CSS per .table-bordered che non ho incluso ...
Questo accade Allucinante pannello ha questa classe:
.col-md-3 {
width: 25%;
}
che costringono sua larghezza. Rimuoverlo e apparteneva sarà ok :-)
Grazie Luca, ma non era proprio quello che stavo cercando. Ho modificato la mia domanda per rendere le cose più chiare. –
Non puoi avere ciò che desideri, semplicemente perché hai un contenuto che richiede uno spazio maggiore rispetto alla larghezza del pannello. Come vedi, non hai "frasi" che possono essere racchiuse all'interno di celle di una tabella, ma solo singole parole, che riempiono uno spazio specifico. Se non riesci ad ingrandire il Pannello, solo le soluzioni riducono il riempimento sulle celle delle tabelle e le dimensioni dei caratteri di ogni testo ... Sarai in grado di recuperare un po 'di spazio ... –
meglio non usare pannello di corpo, Mettere il tavolo all'interno del tag del pannello, di non utilizzare Corpo Panel
L'utilizzo del contenitore ha anche un impatto su di esso. Se il tuo layout non ha un layout fisso, usa container-fluid e non ci saranno problemi con la reattività della classe .table.
<div class="panel-body" style="overflow:scroll">
<table class="table table-bordered">
Basta scrivere questo per lo scorrimento orizzontale della tabella nel corpo del pannello.
Ho aggiornato il tuo post per includere il codice. Puoi leggere la formattazione del codice su questo sito all'indirizzo http://stackoverflow.com/help/formatting – josliber
Fresco. Funziona bene anche quando collassato per restringere la vista del dispositivo. Funziona anche per una tabella mostrata nella finestra di dialogo del bootbox che è racchiusa in div.table-responsive. Solo le modifiche dovevano usare auto per overflow-x e per rimuovere il bordo - il bordo è fornito dalla finestra di dialogo. Vorrei anche suggerire di avvolgere qualsiasi tabella all'interno di un pannello in div.row - che fa scorrere la tabella da sinistra a destra. –
Bello. Esattamente quello che stavo cercando.Rinominare la classe "table-responsive" in "table-responsive-custom" per evitare collisioni con la classe Bootstrap reattiva alla tabella originale. –