テーブルセル間でテキストを垂直に配置できません（HTML）

Question

HTMLテーブルのセルにHTMLテーブルがネストされています。私は垂直方向に外側のテーブルセルの上部と下部と内部表の内容を揃えるにしようとしているが、テキストの間隔が同じではありません。

HTMLコード：

<table style="position:absolute;"> 
<tr style="position:absolute;top:30px;"> 
    <td> 
     <table> 
      <tr> 
       <td>79. Sushi Regular</td> 
      </tr> 
      <tr> 
       <td>7 pieces sushi & 1 California roll.</td> 
      </tr> 
     </table> 
    </td> 
</tr> 
<tr> 
    <td> 
     <table> 
      <tr> 
       <td style="padding:8px 0 8px 0;">$17.95</td> 
      </tr> 
      <tr> 
       <td> 
        <div style="display:inline-block;"> 
         <p>Add to Cart</p> 
        </div> 
       </td> 
      </tr> 
     </table> 
    </td> 
</tr> 

Answer 1

テキストを各tdの最上部に表示したい場合は、各tdにdivを追加し、その内容をdivに入れます。

これで、あなたはどのようにして必要なのかを管理することができます。

Answer 2

コンテンツの調整には表を使用しないでください。これは、CSSのフレックスレイアウトにとって素晴らしい仕事です。

は、次の例を考えてみましょう：https://jsfiddle.net/zbz81kft/6/

HTML：

<div class="outer-wrapper"> 
    <div class="box"> 
    <p class="description">Two Roll Lunch</p> 
    <p class="price">$9.00</p> 
    </div> 
    <div class="box"> 
    <p class="description">3. Chirashi Sushi Lunch<br>Assortment ...</p> 
    <p class="price">$13.95</p> 
    </div> 
</div> 

はCSS：CSSフレックスレイアウトの実証ガイドがここで見つけることができ

.outer-wrapper { 
    display: flex; 
    flex-direction: row; 
    width: 100%; 
    align-items: stretch; 
} 

.box { 
    background: #ddd; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    width: 200px; 
    margin: 1px; 
    padding: 5px; 
} 

：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

であなたが望むtdあなたはとにかくあなたが親TDの高さに等しい、テキストの行の高さを設定することができ、テーブルを使用したくない場合は垂直に配向されるコンテンツは、<td valign="middle">または<td style="vertical-align: middle;">

Answer 4

を使用しています。

あなたはこのような何かをする必要があります。

また

td{ 
height:60px; 
} 

td span{ 
line-height:60px; 
} 

あなたはインラインブロックとしてTD内のスパンを設定し、そのプロパティ垂直整列を設定しようとすることができます：ミドルまたは上/下を試してみてください、Iそれらをあまり使用しないでください。時には、誤った振る舞いで、異なる値を試してみましょう。あなたがこれを試している場合は、親よりもスパンの高さを小さくしてください。