テーブル行をテキストで拡大

Question

テーブルの行を正確に同じ高さにするにはどうすればよいですか？ <td>のテキストが制限を超えるたびにその行が除外されます。どのように私はそれをしない方法でそれを作るのですか？複数の関連コンテンツ・セクション（向かい合っテーブルセル）と簡潔な、「よく手入れされた」UIについては代わりにここでは以下のテキスト コード

<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

は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> 

そして

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

https://jsfiddle.net/L2awyezb/

Answer 2

であることを示すことは、あなたはよく形成されたデータを持っている必要がありますか妥協するつもりはない。あなたの質問によれば、あなたのデータはではなく、（テキストの量の意味で）整形されているので、あなたは妥協するつもりです。二つの提案：

• 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; 
  } 
  

これらの提案の両方を持つキーは、彼らが（各td要素の高さをロックすることですそれによって全体の行）を経由で単一のテキスト行に出力します。

もちろん、一貫したテーブルの高さには他のオプションもありますが、それ以上の明示的な質問なしにそれらをすべて列挙することは困難です。