Larghezza tabella di limitazione

Question

Ho una tabella html che può essere larga max 700px e non so quante colonne ci saranno (tra 3 e 10). Voglio che tutti gli elementi <th> abbiano il riempimento 5px, ma questo aumenta la larghezza della tabella e fa sì che il div in cui si trova mostri barre di scorrimento orizzontali.

Poiché non conosco il numero di colonne, non è possibile sottrarre il px aggiuntivo aggiunto dal riempimento dalla larghezza totale.

L'immissione di un valore di overflow sul div non ha alcun punto in quanto oscurerà solo le colonne oltre 700px.

C'è un modo per aggirare questo, per impostare un limite rigido corretto sulla larghezza del tavolo?

Answer 1

Utilizzare il CSS qui sotto e questo dovrebbe evitare che la tabella di superamento della dimensione massima si definisce:

table{ 
    table-layout:fixed; 
} 

Answer 2

Impostare la larghezza della tabella su 100% e la larghezza di divisione padre su 700px.

Answer 3

La migliore soluzione possibile per questo è quello che si sta utilizzando ora.

Poiché non è possibile prevedere il numero di colonne, non è possibile impostare una larghezza per ciascuna colonna. Quindi impostare l'overflow del div principale su auto e la larghezza della tabella figlio su 100% è la soluzione migliore.

Answer 4

Su cosa stai attivando il riempimento?

Se si imposta la larghezza sul tavolo e l'imbottitura sul TD si dovrebbe essere in grado di ottenere esattamente quello che vuoi.