Colonne de tableau réactive avec CSS

Question

Il y a un tableau avec trois colonnes, la première et la dernière sont fixes et celle du milieu devrait être fluide.

Le problème : à l'intérieur de la colonne du milieu, il y a du texte avec le texte suivant nowrap et cela l'empêche d'être fluide.

Comment cela pourrait-il être fait ?

Comment cela se présente sur une page large (comportement correct) :

Comment cela doit apparaître sur une page étroite :

Comment cela se présente réellement sur une page étroite (comportement incorrect, voir la barre de défilement) :

Le code https://jsfiddle.net/8c9msa71/

td {
  border: 1px solid black;
}

.fluid {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<table>
  <tr>
    <td>first</td>
    <td class="fluid">very-very-very-very-very-very-long-second-text</td>
    <td>third</td>
  </tr>
</table>

Answer 1

Vous pouvez le faire en ajoutant un div

td { border: 1px solid black; }
.fluid { position: relative; width: 70%;}
.fluid div {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  left: 5px;
  right: 5px;
  top: 0;
}

<table width="100%">
  <tr>
    <td>first</td>
    <td class="fluid">
    <div>very-very-very-very-very-very-long-second-text</div>
    </td>
    <td>third</td>
  </tr>
</table>

Answer 2

J'ai remarqué la solution consistant à ajouter un div.

Si vous ne voulez pas ou ne devez pas ajouter de div, vous pouvez utiliser max-width.

Explication : Votre premier problème est qu'aucun de vos éléments n'a d'attribut width défini. Pour commencer, je définirais une largeur maximale pour votre "very-very-long-second-text". Par exemple, vous pouvez ajouter max-width: 60vw; à votre .fluid . Si vous n'êtes pas familier avec la syntaxe vw, lisez la suite ici : https://www.w3.org/TR/css3-values/#vw

En ajoutant seulement ceci, vous y serez presque. Il vous reste un problème : Sur les très petits appareils / résolutions, vous remarquez que votre troisième table-data, <td></td> disparaîtra de la zone visible.

Au lieu de réduire TOUT le contenu, je recommande d'utiliser display: inline-block; sur les données de votre table <td></td> . Cela permet d'afficher les données de votre tableau en ligne, à condition qu'elles aient suffisamment d'espace pour être en ligne. En outre, une petite partie de l'information sera visible, au lieu du résultat de AUCUNE information visible du tout. Lorsque la zone disponible devient plus petite (c'est-à-dire en redimensionnant la fenêtre), elles commenceront à sauter vers le bas une par une.

Full CSS :

td { 
  border: 1px solid black; 
  display: inline-block;
}

.fluid { 
  max-width: 60vw; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}