同じCSS定義なのに行の高さが異なる

質問

右側の表と左側の表で、同じCSSを使い、行の高さ２５に指定しているにもかかわらず、
行の高さが異なり、下に行くほどずれてきてしまいます。

一致させるにはどのようにしたらよいのでしょうか。

よろしくお願いします。

回答No.2

ORUKA1951 · ベストアンサー

セルは内容のサイズによって変化します。でないと、小さなウィンドウで見るときはセルの内容が折り返されて高くなりますからね。
　同様に、borderがある<input要素は、そのサイズはボーダー辺の内側です。
ボックスモデル ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html#box-dimensions )
視覚整形モデル詳細 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html )

　tableを分けるのではなく、一つの行に収めるべきです。tableは、そうしたものです。
Tables in HTML documents (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.2.5 )

<table summary="List">
　<colgroup span="5">
　<colgroup span="4">
　<thead>
　　<tr>
　　　<th abbr="check">レ</th>
　　　<th abbr="資源">L5資源名称</th>
　　　<th abbr="単位">単位</th>
　　　<th abbr="数量単価">投入数量/単価</th>
　　　<th abbr="18">18</th>
　　　<th abbr="19">19</th>
　　　<th abbr="20">20</th>
　　</tr>
　</thead>
　<tbody>
　　<td rowspan="2"><input type="checkbox"></td>
　　<td rowspan="2">1</td>
　　<td rowspan="2">0.7m³バツクホウ</td>
　　<td rowspan="2">台</td>
　　<td>0.80</td>
　　<td><input type="text" name="aaa" size="10"></td>
　　<td><input type="text" name="aaa" size="10"></td>
　　<td><input type="text" name="aaa" size="10"></td>
　</tbody>
</table>

お礼

お礼が遅くなりました。

丁寧な説明で、よく分かりました。

ありがとうございました。

回答No.1

t_ohta

中に表示しているものの高さも合わせましょう。

右側はinputタグが使われているように見えます。
この場合、文字の高さ＋テキストボックスの枠の高さが中身の高さになり、セルの高さ25pxより中身が大きければセルの高さは大きい方に合わされてしまいます。

お礼

お礼が遅くなりました。

ずれた理由がわかりました。ありがとうございました。