Devo mostrare i dati tabulari utilizzando un table, ma sarà all'interno di un layout fluido; Voglio averlo riempire l'intera larghezza disponibile, ma non espandersi orizzontalmente oltre la larghezza massima dello schermo, in modo che lo body non ottenga una barra di scorrimento orizzontale. Invece gli elementi td troppo larghi devono ottenere la barra di scorrimento.Come limitare la larghezza della tabella all'elemento (o schermo) che lo contiene?
Nell'esempio c'è DATA nel table, il table ha border:1px solid black e l'uscita sarà facile analisi quando convogliato da arricciatura pure (da qui il white-space:pre); Lo div è solo il normale helper per il layout CSS, se possibile liberiamoci anche di quello!
La parte importante è che essa può esservi pixel fisso tipo di layout larghezza, e la table deve essere più piccola della larghezza disponibile nel caso dati non ha bisogno che molto spazio. Quindi, per riassumere, un semplice tavolo che non si allarga più dello schermo. Idealmente, lo table estenderebbe solo l'elemento genitoriale fino a quando non si raggiunge lo max-width di quell'elemento che lo racchiude e quindi non si allarga.
In Chrome, con qualcosa che ritengo essere un trucco male, ho avuto modo di mantenere il table con la larghezza massima disponibile e per visualizzare le barre di scorrimento sul td, se necessario. Tuttavia, ciò non funziona per FF, né è una soluzione che può essere considerata corretta.
Seguendo esempio di questo può essere trovato alla https://hydra.geht.net/table-quirx.html per un po ':
<head>
<title>Obey max-width for table</title>
<style>
.nw { white-space:nowrap }
.quirx div { width:100%; max-width:100%; white-space:pre }
.quirx td { max-width:90px; border:1px solid black }
.quirx td+td { max-width:500px; overflow:auto }
table.quirx { width:100%; max-width:100%; border:1px solid black; border-collapse:collapse }
td { align:left; max-width:100% }
</style>
</head>
<body>
<table summary="" class="quirx"><tr><td colspan="3">
Just some info
</td></tr><tr><td>KEY</td><td><div>DATA (which might contain long lines PRE formatted) XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div>
</td></tr></table>
</body>
</html>
Si noti che il "colspan = 3" non è un errore qui, nella mia app a volte una terza colonna può presentarsi, questo non può essere noto al momento dell'emissione dell'intestazione table. (Alcune cose stile sono ridondanti, troppo.)
Il trucco di cui sopra è, che s' max-width il td insieme sono più piccolo dello schermo solito (590px) e il table poi si distende alla data width, che è 100% . Poiché gli td s non si estendono oltre lo schermo, la proprietà overflow interna div può funzionare come previsto. Tuttavia in FF non funziona in questo modo, né con width né con max-width (che è probabilmente dovuto al loro stato inline). In Chrome a width:100% o simile non funziona su td né sugli elementi tr. Notare che con max-width si ottiene un layout di tabella più piacevole rispetto a width (non capisco questa differenza).
Oltre al bug che questo funziona solo in Chrome, un altro bug è, che il table utilizza a pieno schermo larghezza, anche se questo non è necessario se non v'è solo un piccolo dati al display.
Alcune note circa che tutti:
- Penso che questa qui è una cosa molto semplice e io sono perplesso perché sembra così difficile esprimere con i CSS
- Un obiettivo è quello di mantenerla libera da ogni JavaScript, in modo che solo i CSS con hack
- l'utente può ridimensionare la finestra, per esempio da 800px a 1920px o ancora più ampio, e così s la larghezza
table' deve seguire automaticamente (senza JavaScript) - Esso presenta la buona su testo browser basati come
Lynxew3m, troppo - uscita non deve essere troppo ingombrante per una facile analisi quando convogliata da
curl - Esso presenta la più o meno correttamente sulla maggior 4 (IE, FF, Chrome, Safari)
- Non deve rompere sugli altri (può avere errori di rendering, ma il contenuto non deve essere nascosto)
Non ho davvero idea di come archiviarlo. Forse è una FAQ, ma non sono stato in grado di individuare una soluzione da solo.
Questo è stato utile. Sto incontrando problemi e il layout della tabella sembra essere in gioco. Grazie – huyz
Questo è incredibilmente utile, grazie amico –