Come rendere la larghezza di una colonna adatta al suo contenuto nella tabella HTML?

Question

Ho la seguente tabella nel mio HTML:

<div style="max-width:700px;"> 
    <table border="1"> 
     <tr><td colSpan="2">this is a loooooooooooooooong text</td></tr> 
     <tr><td width="1px">a:</td><td >b</td></tr> 
     <tr><td width="1px">c:</td><td >d</td></tr> 
    </table> 
<div> 

voglio la prima larghezza della colonna nella seconda e terza fila per adattarsi solo la lunghezza del contenuto (che è il motivo per cui ho messo width="1px" lì). Nel frattempo, voglio fare in modo che la larghezza della tabella si adatti solo alla lunghezza del contenuto più lungo nella tabella (che è la prima riga) invece di estendersi alla larghezza massima del suo div di delimitazione.

Funziona in Firefox come mostrato di seguito.

Tuttavia, in IE 9 non funziona come previsto, come mostrato.

ho cercato di sostituire width="1px" con width="1%". Ma poi la larghezza della tabella si estenderà fino alla larghezza massima del div genitore.

Qualcuno sa come risolvere il problema in IE?

Answer 1

ho appena testato nella mia IE9, e impostando la larghezza a 1px opere. Ma viene visualizzato come presentato sopra in modalità compatibilità. Hai dichiarato il tuo doctype e tutte le altre cose divertenti?

Potrebbe essere perché si stanno utilizzando metodi precedenti per visualizzare la tabella. Si potrebbe provare styling la tabella con i bordi e così via in CSS - come ad esempio:

table, td, tr, th{ 
    border:1px solid #f0f; 
} 

.onepx{ 
    width:1px; 
} 



<div style="max-width:700px;"> 
    <table> 
    <tr><td colspan="2">this is a loooooooooooooooong text</td></tr> 
    <tr><td class="onepx">a:</td><td>b</td></tr> 
    <tr><td class="onepx">c:</td><td>d</td></tr> 
    </table> 
<div> 

e così via - sono sicuro che si ottiene l'idea. questo potrebbe interrompere la visualizzazione automatica nella visualizzazione di compatibilità (se è il problema).

Infine, poiché IE9 è così stupido, sarà necessario disattivare la visualizzazione di compatibilità (se abilitata sulla pagina), poiché tutte le pagine all'interno del dominio verranno visualizzate in visualizzazione compatibile.

Answer 2

Hai detto che hai provato ad impostarlo a 1%, hai impostato l'altro al 99%?

<tr><td width="1%">a:</td><td width="99%">b</td></tr> 
<tr><td width="1%">c:</td><td width="99%">d</td></tr>