La prima colonna nella tabella HTML è flessibile quando la larghezza della tabella è = 100%

Question

Ho una tabella HTML con 8 colonne e più righe. Il contenuto di ogni cella viene generato dinamicamente ed è difficile prevedere la larghezza di qualsiasi colonna. Ho impostato la larghezza della tabella = 100% come vorrei che la tabella occupasse l'intera larghezza del div. Vorrei che le colonne da 2 a 8 rimangano uguali a quelle della larghezza, come se non avessi impostato una larghezza di tabella. Quindi vorrei che la prima colonna espandesse la sua larghezza in modo che la larghezza della tabella diventasse del 100%. È possibile?

Answer 1

Imposta larghezze esplicite per 2 - 8 e Cella 1 determinerà la propria larghezza con lo spazio rimanente. È anche possibile impostare no-wrap per gli spazi bianchi nella prima cella, in modo che i contenuti non si avvolgano, ma costringano la cella a crescere quando necessario.

Answer 2

Penso che la tua domanda non sia completa, perché letto letteralmente, la risposta è non impostare nessuna larghezza di colonna. Ogni colonna occuperà tutto lo spazio che vorrà e in qualche modo lo distribuiranno tra di loro.

Potete chiarire cosa vorreste ottenere?

Answer 3

<div> 
<table width="100%"> 
<tr> 
<td width="100%"></td> <- this is col 1 
<td></td><td></td><td></td><td></td><td></td><td></td><td></td> <- cols 2-8 
</tr> 
</table> 
</div> 

modificando la prima cella al 100%, forzerà quella cella per cercare di essere la più ampia possibile, pur rispettando le larghezze del resto delle celle. Se le celle 2-8 contengono del testo, è possibile aggiungere in modo che il testo all'interno di quelle celle non venga incartato a causa del tentativo della prima cella di raggiungere il 100% della larghezza.

Answer 4

Impostare una larghezza sul tavolo e su tutte le altre colonne; la colonna rimanente occuperà tutto il gioco.

Il trucco è utilizzare lo stile table-layout: fixed in modo che l'algoritmo di indentazione del layout automatico (e l'interpretazione particolarmente scarsa di IE) non intervenga e non lo comporti quando ci sono quantità di contenuto più grandi del previsto in una colonna.

In modalità layout fisso, la prima riga di celle o <col> elementi imposta la larghezza; ulteriori righe non influenzano le larghezze. Questo rende il rendering più veloce; dovresti usare un layout fisso per ogni tabella che puoi.

<table> 
    <col class="name" /><col class="data" /><col class="data" /><col class="data" /> 
    <col class="data" /><col class="data" /><col class="data" /><col class="data" /> 
    <tr> 
     <td>tiddle om pom pom</td> 
     <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td> 
    </tr> 
</table> 

table { width: 100%; table-layout: fixed; } 
col.data { width: 2em; }