Td Höhe auf zwei separaten Tabellen

7

Ich habe zwei separate Tabellen, auf denen ich einen Fokus + Hover-Funktion auf jedem tr, die beide Tabellen gleichzeitig funktioniert, verwenden, ist mein Problem mit td Höhe, weil wenn die Beschreibung eines td aus der ersten Tabelle größer ist angezeigt werden zwei Zeilen in der gleichen td und die Höhe von td werden modifiziert, aber nur in die erste Tabelle td. Wie ist es möglich, die Höhe an die td von der ersten Tabelle zu erinnern und diese auf td von der zweiten Tabelle hinzuzufügen, um beide td gleiche Größe zu haben. In meinem Beispiel werden nur die ersten beiden tr angezeigt ok die anderen beiden werden wegen der Beschreibung der ersten Tabelle td nicht angezeigt.

Geige Beispiel:   Ссылка

%Vor%

Ссылка

Danke.

    
mcmwhfy 27.04.2012, 13:35
quelle

7 Antworten

21

Wenn ich Sie richtig verstanden habe, möchten Sie, dass die Höhen in jeder Zeile der beiden Tabellen gleich sind?

Wenn ja, sollte das funktionieren:

%Vor%

Offensichtlich ist die Verwendung von :first und :last selectors nicht ideal, Sie sollten diese als id selectors ändern.

Beispielgeige

AKTUALISIEREN

Die Lösung für das Problem, das Sie in Ihrem Kopfgeld erwähnt haben, ist, dass der Rahmen für die Elemente td nicht berücksichtigt wird.

Ersetze height() durch outerHeight() beim Überprüfen der aktuellen Zeile und es sollte funktionieren:

%Vor%     
Rory McCrossan 27.04.2012, 13:42
quelle
3

Erhalte die maximale Höhe aller tr Elemente und setze dann die Höhe aller tr s auf diese Höhe:

%Vor%

Arbeitsbeispiel

(Ich denke, ich habe Ihre Frage vielleicht falsch verstanden ... das wird die Höhe aller tr s auf die gleiche Höhe setzen)

    
ManseUK 27.04.2012 13:40
quelle
3

Fügen Sie einige IDs zu den Tabellen hinzu und fügen Sie diesen Code hinzu:

%Vor%

Hier funktioniert jsFiddle: Ссылка

    
gabitzish 27.04.2012 13:45
quelle
2

Um zu tun, was Sie wollen, können Sie nur eine Tabelle mit einer leeren Spalte ohne Grenze zwischen den beiden Teilen haben. Auf diese Weise wird die Zellenhöhe basierend auf dem Inhalt immer noch dynamisch sein, aber auch alle Zellen in der Reihe von beiden Seiten der Tabelle aus verbrauchen.

    
DangerMonkey 27.04.2012 13:43
quelle
2

Dadurch wird die Zeilenhöhe im Handumdrehen angepasst

%Vor%     
rt2800 27.04.2012 13:46
quelle
2

Nun, ich denke, ich bin ein wenig zu spät, Sie können einen Knopf sehen, der die Höhe der zweiten Tabelle festlegt, hier:

Ссылка

Sie können diese Codezeile in Ihre document.ready-Funktion einfügen und es sollte den Trick machen:

%Vor%

Es ist auch wichtig, das CSS für die <td> -Elemente mit dieser Eigenschaft zu ändern:

%Vor%

Hier ist eine robuste Lösung, die alle Zeilenhöhen von 2 Tabellen berücksichtigt, die von der Tabelle id angegeben werden. 4 Zeilen in document.ready-Funktion, keine Notwendigkeit, CSS direkt zu ändern:

%Vor%

Siehe die Geige hier: Ссылка

    
jeffery_the_wind 27.04.2012 13:57
quelle
2
%Vor%

Wenn Sie dies zu Ihrer Geige hinzufügen, wird die Größe jeder Zeile geändert, wenn die entsprechende Zahl größer ist. In diesem Fall müssen Sie jedoch Ihren Tabellen IDs geben. Wie in dieser Geige: Ссылка

    
Andrea Silvestri 08.05.2012 12:13
quelle

Tags und Links