due colonne: uno più piccolo possibile, l'altro prende il resto

Question

Ho una tabella a colonne in un div:

<div> 
<table> 
    <tbody> 
    <tr> 
     <td class="action" > 
     <a> ✔ </a> 
     </td> 
     <td class="content"> 
     <p>Bigger text...(variable size).......</p> 
     </td> 
    </tr> 
    <tr> 
     <td class="action" > 
     <a> ✔ </a><a> ✘ </a> 
     </td> 
     <td class="content"> 
     <p>Bigger text...(variable size).......</p> 
     </td> 
    </tr> 
     ... same structure in all the table 
    </tbody> 
</table> 
</div> 

E vorrei la colonna "azione" per adattare il contenuto, e la colonna "contenuto" per occupare il resto dello spazio disponibile. La colonna "azione" apparirebbe meglio con un allineamento a destra. La tabella dovrebbe anche contenere il 100% della larghezza del contenitore.

C'è un modo per farlo senza fissare la larghezza delle colonne?

ho provato con questo:

table .action 
{ 
    width:auto; 
    text-align:right; 
} 
table 
{ 
    border-collapse:collapse; 
    border-spacing:0; 
    width:100%; 
} 

Ma la colonna di sinistra prende la metà del tavolo ...

Answer 1

Dare il contenuto td una larghezza di 100% sarà costringerlo a prendere tanto spazio quanto può, quindi .content{ width: 100% } dovrebbe funzionare.

Fornire inoltre .action a white-space: nowrap per assicurarsi che x e il segno di spunta restino uno accanto all'altro. Altrimenti il ​​contenuto sarà in grado di occupare ancora più spazio e forzare le icone l'una di seguito all'altra.

table .action 
 
{ 
 
    width:auto; 
 
    text-align:right; 
 
    white-space: nowrap 
 
} 
 
table .content { 
 
    width: 100% 
 
} 
 
table 
 
{ 
 
    border-collapse:collapse; 
 
    border-spacing:0; 
 
    width:100%; 
 
    border: 1px solid 
 
}

<table> 
 
    <tbody> 
 
    <tr> 
 
     <td class="action" > 
 
     <a> ✔ </a> 
 
     </td> 
 
     <td class="content"> 
 
     <p>Bigger text...(variable size).......</p> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="action" > 
 
     <a> ✔ </a><a> ✘ </a> 
 
     </td> 
 
     <td class="content"> 
 
     <p>Bigger text...(variable size).......</p> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

ho trovato questa risposta quando si cerca di fare una colonna di molti il più piccolo possibile.

Dando il contenuto td un 1% width lo costringerà a occupare il minimo spazio possibile, quindi .content{ width: 1% } ha funzionato per me.

Answer 3

impostare la colonna width: 1px & white-space: nowrap.

Questo cercherà di rendere 1px ma il nowrap lo fermerà da ottenere più piccolo l'elemento più largo in quella colonna