2010-12-01 11 views
1

Das hat mich verrückt gemacht, leider haha. Ich kann nicht herausfinden, warum ich die "X" in meinem Tisch nicht mit der Unterseite des Tisches ausrichten kann ... Ich habe versucht, an verschiedenen Stellen in der CSS vertikal auszurichten, aber ohne Erfolg :(. auch bin ich in meinem Tisch richtig für weiße Flecken mit?Warum arbeitet 'Vertical-align: bottom' nicht an dieser Tabelle?

Hier sind snips meiner beiden HTML und CSS-Dateien ... würde keine Kommentare stark

<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> 

....

geschätzt werden
#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; 
} 

Antwort

1

Mit dem HTML und CSS Sie die vertikale Ausrichtung zur Verfügung gestellt haben scheint zu funktionieren, wie ich erwarten würde. Ich habe hier einen kleinen Test auf Jfiddle http://jsfiddle.net/dttMd/ eingerichtet. Ich habe einige Zeilenumbrüche in die erste Zeile geschrieben, um zu bestätigen, dass der folgende Text unten ausgerichtet ist. Wenn Sie nicht danach suchen, können Sie klären, was genau Sie brauchen.

Wie für die leeren Zellen, was Sie tun, ist falsch, da <span> Elemente müssen ein schließendes Tag haben. Meine persönliche Vorliebe ist nur, in die Zellen eine &nbsp; zu setzen. Ich glaube nicht, dass es wirklich einen "richtigen" Weg gibt, aber notwendigerweise (obwohl ich glücklich bin, korrigiert zu werden).

2

Sie könnten position: relative auf Ihrem td und table verwenden, dann verschieben Sie die td nach unten mit bottom: 0px.

Aber ich denke, diese Website Ihre Frage ein wenig deutlicher antworten: http://shouldiusetablesforlayout.com

1

, das ist, weil Sie eine 7px untere Polsterung im td haben. Sie können es zu

padding:3px 2px 0 5px; 

ändern und der Abstand ist weg.

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

-1

Sie können einfach valign="bottom" in jedem td hinzufügen und das wird Inhalt an der Unterseite ausgerichtet werden und wird von jedem Browser der Welt unterstützt!

Hoffe, das würde dir helfen.

0

Die Polsterung kann mit Layout und Höhe/Breite verwechselt werden. Entfernen Sie die Polsterung von Ihrem td und geben Sie stattdessen eine Höhe.

Manchmal kann die Zeilenhöhe den Eindruck erwecken, dass sie nicht nach oben oder unten ausgerichtet ist. Wenn Ihre Schriftgröße kleiner als der Container ist, erbt sie möglicherweise die Zeilenhöhe. Wenn Sie die Zeilenhöhe auf die Schriftgröße (oder nur line-height: 1) setzen und dem td eine Höhe geben, sollte das der Trick sein.

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

Ihre <span> fehlt die Schließung </span>, und Sie sollten nicht eine Spanne zu nehmen Platz verwenden, da es ein Inline-Element ist. Für Tabellen sollten Sie nicht einmal einen Platzhalter benötigen, aber wenn Sie sich wohler fühlen, können Sie &nbsp; verwenden oder wenn Sie möchten, dass es eine Art Padding-/Randstil erbt, können Sie dieses Element verwenden (<p>&nbsp;</p> oder <h3>&nbsp;</h3>).

Verwandte Themen