JS フィドルの例
以下を使用できます。
<td style="vertical-align:top;">Top</td>
<td style="vertical-align:middle;">Middle</td>
<td style="vertical-align:bottom;">Bottom</td>
<td style="vertical-align:54%;">Custom</td>
// More information on: http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
表のセルにコンテンツを正しく配置します。ただし、次のように表のセルに直接色を適用したい場合、背景色の問題が発生します。
<td style="background-color:yellow;"></td>
表の行の高さに関する情報:
「table-row」要素のボックスの高さは、ユーザー エージェントが行内のすべてのセルを利用できるようになると計算されます。これは、行の計算された「高さ」、行内の各セルの計算された「高さ」の最大値です。およびセルに必要な最小の高さ (MIN)。'table-row' の 'auto' の 'height' 値は、レイアウトに使用される行の高さが MIN であることを意味します。MIN は、セル ボックスの高さとセル ボックスの配置に依存します (ライン ボックスの高さの計算によく似ています)。CSS 2.1 では、表のセルと表の行の高さがパーセント値を使用して指定されている場合、それらの高さを計算する方法が定義されていません。CSS 2.1 は、行グループの「高さ」の意味を定義していません。ソース W3.org
- 私はインラインCSSを行いましたが、スタイルシートを使用してCSSを常に分離することを忘れないでください。
div の高さはセルの高さに制限されているようです。セルの高さをピクセル単位で操作できます。100% では、セルの最小高さの 100% しか得られないため、ピクセルまたは任意の形式の寸法で定義する必要があります。