Comment faire en sorte que la dernière cellule d'une ligne occupe toute la largeur restante

Question

Dans le fragment HTML ci-dessous, comment faire pour que la largeur d'une colonne contenant 'LAST' occupe le reste de la ligne et les largeurs de colonnes contient 'COLUMN ONE' et 'COLUMN TWO' juste assez large pour contenir leur contenu, et pas plus grand.

Merci

table { 
 
    border-collapse: collapse; 
 
} 
 
table td { 
 
    border: 1px solid black; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <table width="100%"> 
 
     <tr> 
 
      <td> 
 
      <span> 
 
      COLUMN 
 
      </span> 
 
      <span> 
 
      ONE 
 
      </span> 
 
      </td> 
 
      <td> 
 
      COLUMN TWO 
 
      </td> 
 
      <td> 
 
      LAST 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     ANOTHER ROW 
 
    </td> 
 
    </tr> 
 

 
</table>

Answer 1

Vous aurez besoin de dire les deux premières colonnes de ne pas envelopper et donner la dernière colonne d'une largeur de 99%:

<table width="100%"> 
     <tr> 
     <td style="white-space: nowrap;"> 
      <span> 
      COLUMN 
      </span> 
      <span> 
      ONE 
      </span> 
     </td> 
     <td style="white-space: nowrap;"> 
      COLUMN TWO 
     </td> 
     <td width="99%"> 
      LAST 
     </td> 
     </tr> 
    </table> 

Edit: Vous devriez mettre tous les styles/présentation dans (externe ...) css.

Utilisation des classes pour les colonnes (vous pouvez utiliser des sélecteurs CSS3 comme nth-child() au lieu si vous ciblez uniquement les navigateurs modernes):

html:

<tr> 
    <td class="col1"> 
    // etc 

css:

.col1, .col2 { 
    white-space: nowrap; 
} 
.col3 { 
    width: 99%; 
}