2017-01-23 1 views
1

Ich habe eine Webseite unter http://bikepaths.com/Armstead/GBA1.html, und ich habe eine HTML-Tabelle eingerichtet, um Text und Bilder mit rowspan so zu ordnen, dass die erste Spalte eine kleine Menge Text über einem großen Bild hat, während die zweite Spalte ein großes Bild über a hat kleine Menge an Text.gibt es einen Workaround, um rowspan in MS-Browsern arbeiten zu lassen?

<table> 
    <tr> 
     <td>George's first memory of note was ... </td> 
     <td rowspan="2"><img src="image/IM-GBA1885.jpg" height="440" width="280"></td> 
    </tr> 
    <tr> 
     <td rowspan="2"><img src="image/IM-JBA4-GBA.jpg" height="400" width="280"> </td> 
    </tr> 
    <tr> 
     <td>Also he recalled watching his half brother, James Benson Armstead IV <i>[on left]</i>, go through .... </td> 
    </tr> 
</table><br> 

Also 3 Zeilen, mit rowspan = 2 auf jeder der Bildzellen. Dies wird sowohl in Firefox als auch in Chrome angezeigt, aber die MS-Browser, die ich ausprobiert habe (IE11 und Edge), zeigen beide als einfache 2-Zeilen-Tabelle an, wodurch über und unter jeder Textzelle eine Menge Platz bleibt.

Ich weiß, MS sollte vom Erstellen von Browsern verboten werden, bis sie erfahren, was "folgende Standards" bedeutet, aber gibt es eine Abhilfe, um diese Anzeige ordnungsgemäß in IE und Edge zu machen?

+0

Können Sie den von Ihnen verwendeten HTML-Code posten? – Pavlo

+0

Ich habe es zu der Frage hinzugefügt. – Pavlo

+4

Ja, es gibt einen Workaround. Hör auf, Tabellen für das Seitenlayout zu verwenden :) –

Antwort

1
<table style="table-layout:fixed"> 
<tr><td></td><td></td><td></td></tr> 
<tr><td colspan="3">three colunms width</td></tr> 
<tr><td colspan="2">two columns width</td><td>one column</td></tr> 
<tr><td colspan="1">one column</td><td colspan="1">one column</td><td colspan="1">one column</td></tr> 
</table> 

zu beachten, dass die Summe der colspan Attributwerte oder die Summe der Anzahl von TD-Elemente in jeder Reihe die Anzahl der TD-Elemente gleich der ersten fest (versteckt, weil die td-Zellen leer sind) Reihe.

Gehen Sie zu validator.w3.org/nu und kopieren und fügen Sie Ihr Markup in das direkte Eingabeformular ein und drücken dann den Validierungs-Button .... Die w3-Validatoren können erkennen, wo die Anzahl der td-Elemente und die Summe von colspan ist Attribute stimmen nicht überein.

+0

Mein Problem war mit rowspan, nicht colspan, aber ich habe Ihre Lösung optimiert. Mit nur zwei Spalten, konnte ich nicht die Bilder zu überlappen (d. H. Der obere Teil der Spalte 1 Bild in Zeile 2 mit dem unteren Teil der Spalte 2 Bild sein). Als ich jedoch eine dritte Spalte mit Leerzeichen in allen drei Zeilen hinzufügte, bemerkte ich eine leichte Überlappung. Indem ich den zweiten Eintrag in dieser letzten Spalte zu einer Reihe von
  Elementen mache, könnte ich den Überlappungsgrad für die Bilder in der zweiten Zeile steuern. Ein bisschen chaotisch, aber es funktioniert. – LitterWalker

Verwandte Themen