2010-12-01 7 views
1

これは私を狂ってしまいました。なぜ私はテーブルの "X"をテーブルの一番下に合わせることができないのか分かりません...私はCSSの別の場所に縦線を入れてみましたが、役に立たなかったのです。 。また、ここではなぜこのテーブルでは「垂直整列:ボトム」で作業していません

?私は私のテーブル内の空白のスポットを正しく使用しています両方の私のHTMLとCSSファイルの切れ端です...任意のコメントをいただければ幸いです

<html> 
<head> 
<title>Day4: Table King</title> 
<link rel="stylesheet" type="text/css" href="stylesday4.css" /> 
</head> 

<body> 
<table id="products"> 
    <tr> 
    <th><span></th> 
<th>Free Version</th> 
<th>Lite Version</th> 
<th>Full Version</th> 
</tr> 
<tr> 
    <td>Advertising</td> 
    <td id="td">X</td> 
    <td><span></td> 
    <td><span></td> 
</tr> 
<tr class="alt"> 
    <td>Catering Software</td> 
    <td><span></td> 
    <td id="td">X</td> 
    <td id="td">X</td> 
</tr> 

....

#products 
{ 
border-collapse:collapse; 
width:100%; 
} 
#products th, #products td 
{ 
border:1px solid #0000FF; 
background-color:#C0C0C0; 
padding:3px 2px 7px 5px; 
} 
#products th 
{ 
font-size:20px; 
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
color:#0000FF; 
padding-top:4px; 
padding-bottom:5px; 
background-color:green; 
} 
#products td 
{ 
vertical-align:bottom; 
} 
#products tr 
{ 
text-align:center; 
color:#0000FF; 
} 
#products tr.alt td 
{ 
color:blue; 
background-color:#A7C942; 
} 

答えて

1

は、私が期待通りに動作しているようです。私はここでjsfiddleの小さなテストを設定しましたhttp://jsfiddle.net/dttMd/。次のテキストがボトム・アライメントされていることを確認するために、最初の行に改行を入れます。これがあなたの後ろでない場合は、あなたが必要とするものが何であるかを明確にすることができます。

空のセルについては、<span>要素に終了タグが必要なため、何をしているかは間違っています。私の個人的な好みは、細胞に&nbsp;を入れることです。私は必ずしも正しい方法があるとは思わないが(私は訂正されてうれしいが)。

2

tdtableにはposition: relativeを使用できますが、 bottom: 0pxを使用してtdを下部に移動します。

はしかし、私はこのウェブサイトは、もう少し明確にあなたの質問に答えるべきだと思う:あなたはtdで7px下パディングを持っているのでhttp://shouldiusetablesforlayout.com

1

だという。

padding:3px 2px 0 5px; 

に変更できます。スペーシングはなくなりました。あなたが垂直整列を提供してきたHTMLとCSSで

http://jsfiddle.net/6AAvH/2/

-1

をすべてtdに追加するだけでコンテンツが一番下に並び、世界中のすべてのブラウザでサポートされます!

希望すると、これが役に立ちます。

0

埋め込みは、レイアウトと高さ/幅を混乱させる可能性があります。あなたのtdから詰め物を取り除いて、それに高さを付けてください。

行の高さによっては、上または下に揃っていないように見えることがあります。フォントサイズがコンテナより小さい場合は、行の高さを継承している可能性があります。行の高さをフォントサイズ(または単にline-height: 1)に設定して、tdに高さを設定すると、そのトリックを行う必要があります。

<td height="18" valign="bottom" style="font-size:9px; line-height:9px;">TEXT</td> 

あなた<span>は決算</span>が不足している、とあなたはそれがインライン要素であるため、スペースを占有するスパンを使用すべきではありません。テーブルの場合は、プレースホルダは必要ありませんが、もっと快適な場合は&nbsp;を使用するか、ある種のパディング/マージンスタイルを継承する場合は、その要素(<p>&nbsp;</p>または<h3>&nbsp;</h3>)を使用できます。

関連する問題