So formatieren Sie mehrere Tabellen für die vertikale Ausrichtung
Habe ich geerbt, einige HTML-code und wurden gebeten, richten Sie die beiden Tabellen, so der text, Linien, die sich zwischen den beiden Spalten.
Es gibt eine äußere Tabelle sieht vor, dass ein zwei-Spalten-look in dieser Sache, dann die beiden inneren Tabellen (eine für jede Spalte). Jede innere Tabelle enthält Felder, die text enthalten. Es sind diese Boxen von text, die der Kunde will, ausgerichtet zwischen den beiden Spalten.
Kann ich denken Sie an einige Möglichkeiten, um die Zeilen des Textes "match" zwischen den beiden Spalten, aber nichts einfach oder elegant.
Hier ist der html-code:
<html>
<head>
<title>Test</title>
</head>
<body >
<table width="100%" border="1" cellspacing="2" cellpadding="0">
<tr>
<td width="50%">
<hr align="left" />
<p><center><strong>Left Side</strong></center></p>
<table width="100%" border="1" cellspacing="2" cellpadding="0">
<tr>
<td width="5%">
<strong>1:</strong>
</td>
<td width="90%">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</td>
</tr>
<tr>
<td width="5%">
</td>
<td width="90%">
<hr align="left" />
</td>
</tr>
<tr>
<td width="5%">
<strong>2:</strong>
</td>
<td width="90%">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</td>
</tr>
<tr>
<td width="5%">
</td>
<td width="90%">
<hr align="left" />
</td>
</tr>
</table>
</td>
<td width="50%">
<hr align="left" />
<p><center><strong>Right Side</strong></center></p>
<table width="100%" border="1" cellspacing="2" cellpadding="0">
<tr>
<td width="5%">
<strong>1:</strong>
</td>
<td width="90%">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</td>
</tr>
<tr>
<td width="5%">
</td>
<td width="90%">
<hr align="left" />
</td>
</tr>
<tr>
<td width="5%">
<strong>2:</strong>
</td>
<td width="90%">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</td>
</tr>
<tr>
<td width="5%">
</td>
<td width="90%">
<hr align="left" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>EDIT: Weitere Klarstellungen und Einschränkungen auf dieses Ding.
- Erzeugt werden, die von einem servlet-Programm, so dass die Reihenfolge der beiden Spalten ist loop-basiert. Das heißt, eine Schleife schreibt die ersten (linken) Spalte, dann noch eine Schleife schreibt, die zweite (Rechte) Spalte. Sie sind nicht "blendable" Schleifen - Sie ausführen müssen, eine nach der anderen, stark einschränken, was darf ich tun mit der Formatierung.
- Der client angegeben hat, "no javascript" in den servlets. Es ist eine Feste Einschränkung.
Kann ich CSS verwenden, aber die beiden Schlaufen (Links, dann rechts) befestigt sind.
Könntest du eventuell ein Bild, wie Sie möchten, die Ausrichtung zu arbeiten? Ich bin mir nicht 100% sicher, was Sie für Fragen.
Die Antwort unten, mit der interleaved code ist perfekt - genau das, was ich brauche. ABER - aufgrund der Einschränkungen, die für die loops, die ich nicht interleave (Links, rechts, Links, rechts) den code.
Die Antwort unten, mit der interleaved code ist perfekt - genau das, was ich brauche. ABER - aufgrund der Einschränkungen, die für die loops, die ich nicht interleave (Links, rechts, Links, rechts) den code.
InformationsquelleAutor Huntrods | 2009-05-13
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
Nicht ganz sicher zu verstehen, was Sie hier wollen, scheint, Sie möchten, dass Zeilen dynamisch anpassen, Ihre Höhe, basierend auf Ihren Gegenpart Zeile auf die andere Spalte. I. e. die erste Zeile auf der linken Seite hat einen längeren text als die erste Zeile auf der rechten Seite, aber Sie wollen die beiden zweiten Zeilen beginnen ausgerichtet werden, so dass einige leere Raum zwischen dem text der ersten Zeile auf der rechten Spalte und der zweiten Zeile auf der rechten Spalte, richtig?
Wird dies der Fall sein, Ihre Lösung zu entfernen, den Wickeltisch. Eine Tabelle ist bereits auf Spalten basieren, die, Sie benötigen also keine extra Tabelle um die Spalten zu erstellen.
Versuchen, diesen code:
Keine Notwendigkeit zu sagen, dass dies ist eine schreckliche und sehr old-school-Weg, das zu tun, was Sie tun, sind Sie besser mit divs und css, aber wie Sie sagten, Sie erbte ich den code zu verstehen, dass eine Umgestaltung nicht möglich ist.
Dies ist eine schöne Lösung, aber die beiden Spalten sind interleaved (Links, dann rechts, dann Links, dann rechts...). Aufgrund der Art und Weise der html-Code erstellt (siehe den edit in meinem ursprünglichen post), ich kann nicht verwenden diesen Ansatz. Ich wünschte, ich könnte. Cheers, -R
... und ja, es ist sicherlich 2000 jahrgang html. 😉
wenn du meinst, dass der Inhalt für die gesamte linke Spalte zuerst, dann die ganze Rechte Spalte... ich bin mir ziemlich sicher, dass es keine Möglichkeit gibt, das zu erreichen, was Sie wollen. Aber es ist unklar, ob Sie Zugriff auf den Inhalt 'generator' ist oder nicht, kannst du mal mehr details in Ihre Frage bitte?
Richtig. Die linke Spalte muss vollständig erstellt, dann die Rechte Spalte. Kann ich Zugriff auf den code bis zu einem gewissen Grad, aber nicht ändern können, dieses spezifische detail der code. (Zugriff auf Komponente).
InformationsquelleAutor palako
OK, ich denke ich verstehe das problem, von dem, was andere gesagt haben. Wenn Sie sind in der Lage, ändern Sie den code selbst (nicht explizit sagen), dann ist die Schnellste Lösung ist diese:
Gibt es nicht wirklich irgendwelche CSS (d.h. nicht-Tabelle) Lösungen, die ich mir denken kann, dass die Arbeit mit cross-browser -. Sie können
inline-blockaber es gibt Vorbehalte.InformationsquelleAutor DisgruntledGoat
Wenn ich das richtig verstehe, möchten Sie die Zeilen von zwei Tabellen zur Anpassung der Höhe der obersten Reihe der beiden für jede Zeile der Tabelle.
Denke ich nur zwei Möglichkeiten, das zu tun sind:
Das zweite ist natürlich der Weg zu gehen, aber der erste sollte auch funktionieren, wenn beide Tabellen immer die gleiche Anzahl an Zeilen (aber müssen Sie sowieso) und Sie können nicht viel ändern in der html.
Abgesehen davon, dass ich dont denke, es ist ein html /css-Lösung.
InformationsquelleAutor jeroen