ligne de la table développant avec du texte

Question

Comment faire pour que les lignes de table aient exactement la même hauteur? chaque fois que le texte dans le <td> dépasse la limite il s'étend sur la ligne. Comment puis-je faire en sorte qu'il ne le fasse pas. montrent plutôt moins de texte est ici le code

<div class="firstDiv" style="width: 200px; height: 200px;"> 

    <table border="1" style="border-collapse: collapse;"> 
     <tr style="height: 20px;"> 
      <th width="33%">First Name</th> 
      <th width="33%">Last Name</th> 
      <th width="33%">Country Of Origin OR MIG</th> 
     </tr> 
     <tr> 
      <td>Mark</td> 
      <td>Hopkins lee brimlow</td> 
      <td>Not living in world right now</td> 
     </tr> 
    </table> 
</div> 

Answer 1

Essayez d'envelopper le texte autour d'un div

<div class="firstDiv" style="width: 200px; height: 200px;"> 

    <table border="1" style="border-collapse: collapse;"> 
     <tr style="height: 20px;"> 
      <th width="33%"><div> 
      First Name 
      </div></th> 
      <th width="33%"><div> 
      Last Name 
      </div></th> 
      <th width="33%"><div> 
      Country Of Origin OR MIG 
      </div></th> 
     </tr> 
     <tr> 
      <td><div> 
      Mark 
      </div></td> 
      <td><div> 
      Hopkins lee brimlow 
      </div></td> 
      <td><div> 
      Not living in world right now 
      </div></td> 
     </tr> 
    </table> 
</div> 

Et utiliser la hauteur

th div, td div{ 
    height:40px; 
    overflow:auto; 
} 

https://jsfiddle.net/L2awyezb/

Answer 2

En ce qui concerne plusieurs sections de contenu connexe (vis-à-vis des cellules de table) et une présentation concise, l'interface utilisateur « bien entretenu », vous devez disposer de données bien formées ou être prêt à faire des compromis. Par votre question, l'hypothèse implicite est que vos données sont pas bien formé (dans le sens du montant du texte) et vous êtes donc prêt à faire des compromis. Deux suggestions:

• Disallow white space wrapping:

  td { white-space: nowrap; } 
  

• Enforce a max-width and make an ellipsis:

  td { 
      white-space: nowrap; 
      max-width: 67px; 
      overflow: hidden; 
      text-overflow: ellipsis; 
  } 
  

La clé avec ces deux suggestions est qu'ils bloquent la hauteur de chaque élément td (et ainsi toute la ligne) à une seule ligne de texte via le white-space: nowrap.

Il existe bien sûr d'autres options pour une hauteur de table cohérente, mais il est difficile de toutes les énumérer sans une question plus explicite.