Avoir un deuxième écran de table Html pour la portée de l'écran

Question

J'ai une table avec deux colonnes et une rangée, et 100% de largeur sur l'écran. Je veux que la première colonne prenne autant de place que le contenu qu'elle contient. Ce contenu ne devrait pas occuper tout l'écran, donc je ne m'inquiète pas de l'emballage. Je veux alors que la seconde cellule occupe le reste de l'espace horizontal.

Comment pourrais-je configurer cette table? J'ai essayé plusieurs combinaisons différentes de définir les largeurs sur les deux cellules en vain.

Answer 1

Configurez votre CSS comme suit:

table { 
    width: 100%; 
} 

td.firstCol { 
    width: 1%; 
    white-space: nowrap; 
} 

Et votre balisage de table comme ceci:

<table> 
    <tr> 
    <td class="firstCol"> 
     First column content 
    </td> 
    <td> 
     Second column content 
    </td> 
    </tr> 
</table> 

Et cela devrait faire l'affaire.