Tabellenzeile, beim Hinzufügen von Füllmaterial zu einer Zelle wird die gesamte Zeile nach unten verschoben

Question

Ich habe eine Tabelle mit einigen Zeilen und Spalten, hier ist das Beispiel der zweiten Zeile

<tr>
    <td valign="top" style="width: 150px;">
        <h5>MyCity</h5>
    </td>
    <td valign="top" style="width: 360px;">
        <h5 class="store_title">Store Title</h5>
        <p>address</p>
    </td>
    <td class="storeDescriptionCell"><div>Description
    </div>
    </td>
</tr>

Ich habe storeDescriptionCell in meinem css hinzugefügt

td.storeDescriptionCell{
padding:20px;
}

Ich habe sogar versucht, mit dem div, aber jedes Mal, wenn ich hinzufügen, Marge oder Polsterung zu Zelle oder div, MyCity, Store Titel geht nach unten mit der Beschreibung. Ich möchte nur die Beschreibung niedriger zu legen.

Answer 1

Sie könnten das folgende CSS verwenden, um alle <td> Zellen auf vertikale Ausrichtung oben und die Ladenbeschreibung auf vertikale Ausrichtung unten:

table td {
    vertical-align: top;
}

table td.storeDescriptionCell {
    vertical-align: bottom;
}

Answer 2

So funktionieren html-Tabellen. Wenn Sie möchten, dass eine Zelle in einer Zeile niedriger ist als der Rest, sollten Sie versuchen, eine Zeilenspanne zu verwenden.

Können Sie sich ein Bild davon machen, was Sie wollen und was Sie bekommen?

Wenn Sie den Inhalt Ihrer Tabelle betrachten, warum nicht ein th für die Überschriften der Spalten verwenden?

<table>
  <tr>
    <th>My City</th>
    <th>Store Name</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <td>content</td>
    <td>$content</td>
    <td>$content</td>
  </tr>
</table>