3
テーブルを使用して表のデータを表示していますが、内容が垂直方向のスペースを取らないようにサイズ調整を完璧にする必要があります私が利用できる以上に。また、私は数十の要素を持っているので、CSSだけを使ったレイアウトは実現できません。ここでテーブル内のインラインブロック要素とブロック要素のボックスモデルtd
は私の簡単なテストコードです：基本的に私は、テーブルの行のみに16pxを取るしたい
<!DOCTYPE html>
<html lang="en">
<head>
<style>
table, td, tr, thead, tfoot, tbody, th, tf {
border-collapse: collapse;
margin: 0px;
padding: 0px;
border:0;
line-height:16px;
}
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr style="height:16px">
<td>
<span style="font-size:10pt;">Here is some text</span>
</td>
</tr>
</table>
</body>
</html>
、しかし、この構成では17pxを取ってしまいます。
放火犯の要素を検査することが、私は同じ動作を取得IEで
... 15ピクセルのスパンが、TDとTR 17時、まだありませんパディング、境界線なし、などを示し
最後に、私は私のスパンのelemを回して、問題を解決することができます、しかし、私の神秘的な余分なピクセルまたは2についてもう少し情報がある、そこにはspan要素にオフセットされているようです（またはスパン要素を表示：ブロックにすることによって、または私が実際には理解していないtable-cellを表示することによって）divに追加することができます。だから私は本当に私の問題を解決するための助けを必要としないが、私は理解したいなぜ表のセル内のインライン要素は、彼らはより多くのスペースを取るようになります。私はgoogleとw3c仕様を試しましたが、役に立つものは何も見つかりませんでした。
興味深いことに、その空のテキストノードのツールはスペースを占めていないことを示しています。また、divにスパンを変更すると、空の小さな空のテキストノードは表示されません。もし私がspanやdivを全く使わずにテキストを直接tdに入れておけば、これはうまくいきます。フォントサイズをより高いレベルにすることは、セルを17の代わりに16ピクセルに正しく設定するように見えますが、なぜそうなるのか分かりません。私は、空のテキストノードを作成するようなこの動作を引き起こす表のセル内にインライン要素を持つものがあるのだろうかと思います。 –
スパンを独自の行に置かないと、空のテキストノードは消えますか？ ... – Nogwater
これは、私がtdとspanタグの間の空白/改行を取り除くと消えてしまいます。私はテーブルセルに改行を入れるのは悪いと思う？マークアップを少し読みやすくしたかったので、そうしました。それでも、なぜセルに、改行で区切りではなくスパンのスペースを増やすのかというと、テーブルセルは、ブロックレベルの要素を使用すると、セル全体を占有すると想定されます。 –