6 Stimmen

Elemente am oberen und unteren Rand von <td> haben

Ich habe Probleme mit einem td, um etwas Text am oberen Rand und eine Bild-Schaltfläche am unteren Rand haben. Hier ist Code ähnlich, was ich jetzt habe:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head></head>
<body>
<table border="1">
  <tr>
    <td valign="top" style="padding:0; height:100%">
      Some text
      <form style="vertical-align: bottom;">
        <input type="submit" value="should be at bottom of td"/>
      </form>
    </td>
    <td>
      This <br />
      This <br />
      This <br />
      This <br />
      This <br />
      This <br />
      This <br />
      This <br />
      This <br />
      This <br />
      This <br />
      This <br />
    </td>
  </tr>
</table>
</body>
</html>

Technisch kann ich erreichen, was ich will, indem ich die erste <td> in 2 Zeilen und mit rowspan="2" zum anderen <td> aber ich möchte das vermeiden, da es nicht intuitiv ist und ich es für einen Hack halte. Außerdem muss ich nur die aktuellsten Versionen von FF und Chrome unterstützen. Irgendwelche Ideen?

P/S: I am Wir haben es hier mit tabellarischen Daten zu tun, also bitte keine Ratschläge in der Art "Sie sollten keine Tabellen verwenden".

UPDATE: Anforderungen für DocType und Browserunterstützung hinzugefügt.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X