IE7 macht mein Leben miserabel! Lücken zwischen HTML-Tabellenspalten (w/colspan) mit css toggle

Kopieren Sie dieses HTML-Code-Snippet und fügen Sie es in IE7. Wenn Sie die ausgeblendeten Spalten umschalten, bleibt eine Lücke zwischen den Spalten. In Firefox funktioniert es gut, die Spalten berühren sich, wenn sie minimiert werden. Habe IE8 noch nicht probiert, wäre gespannt wie es dort funktioniert. Irgendwelche Ideen? Ich habe eine Menge Dinge im CSS-Tabellenlayout ausprobiert: behoben, aber kein Glück.IE7 macht mein Leben miserabel! Lücken zwischen HTML-Tabellenspalten (w/colspan) mit css toggle

Hinweis: Ich suche nicht nach einer anderen Toggle-Methode, da die Tabelle, mit der ich es zu tun habe, 50+ Spalten breit und 4000+ Zeilen ist, so dass Looping/Jquery-Techniken zu langsam sind.

Hier ist der Code - wenn jemand eine funktionierende Version von ihr erneut posten kann, werde ich ihnen sofort den Scheck geben und für immer in Ihrer Schuld sein!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<script> 
function toggle() { 
    var tableobj = document.getElementById("mytable"); 
    if (tableobj.className == "") { 
     tableobj.className = "hide1 hide2"; 
    } 
    else { 
     tableobj.className = ""; 
    } 
} 
</script> 
<style> 
    table { border-collapse: collapse; } 
    td, th { border: 1px solid silver; } 
    .hide1 .col1 { display: none; } 
    .hide2 .col2 { display: none; } 
</style> 
</head> 
<body> 
<input type="button" value="toggle" onclick="toggle();" /> 
<table id="mytable"> 
<tr> 
    <th>A</th> 
    <th colspan="2">B</th> 
    <th colspan="2" class="col1">B1</th> 
    <th colspan="2">C</th> 
    <th colspan="2" class="col2">C1</th> 
</tr> 
<tr> 
    <td>123</td> 
    <td>456</td> 
    <td>789</td> 
    <td class="col1">123</td> 
    <td class="col1">456</td> 
    <td>789</td> 
    <td>123</td> 
    <td class="col2">456</td> 
    <td class="col2">789</td> 
</tr> 
</table> 
</body> 
</html>

Quelle

2010-05-20 Art Peterson

Browser haben unterschiedliche Box-Modelle. So verursacht leicht unterschiedliche Effekte in den Browsern sehen (http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug) IE hält die Größe des "versteckten" Elements durch den Text darin. – Sphvn

@Ozaki - irgendeine Idee, wie man es in meinem Fall davon abhält? Ich habe dieses Problem noch nie mit Tabellen erlebt - hoffe, es gibt einen Weg, es zu lösen. –

@Ozaki - Browser haben KEINE unterschiedlichen Box-Modelle, wenn Sie denselben Doctyp verwenden, aber welches Modell verwendet wird, hängt von dem verwendeten Doctyp ab. – Rob

Hier ist eine Lösung, die JQuery zum Umschalten der Spaltenüberschriften verwendet (siehe meine andere Antwort für die Begründung). Abgesehen von den JQuery-Sachen ist der Rest der HTML-Seite der gleiche.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>  

<script> 
function toggle() { 
    var tableobj = document.getElementById("mytable"); 
    if (tableobj.className == "") { 
     tableobj.className = "hide1 hide2"; 
     $('th[class^=col]').hide(); 
    } 
    else { 
     tableobj.className = ""; 
     $('th[class^=col]').show(); 
    } 
} 
</script> 
<style> 
    table { border-collapse: collapse; } 
    td, th { border: 1px solid silver; } 
    .hide1 .col1 { display: none; } 
    .hide2 .col2 { display: none; } 
</style> 
</head> 
<body> 
<input type="button" value="toggle" onclick="toggle();" /> 
<table id="mytable"> 
<tr> 
    <th>A</th> 
    <th colspan="2">B</th> 
    <th colspan="2" class="col1">B1</th> 
    <th colspan="2">C</th> 
    <th colspan="2" class="col2">C1</th> 
</tr> 
<tr> 
    <td>123</td> 
    <td>456</td> 
    <td>789</td> 
    <td class="col1">123</td> 
    <td class="col1">456</td> 
    <td>789</td> 
    <td>123</td> 
    <td class="col2">456</td> 
    <td class="col2">789</td> 
</tr> 
</table> 
</body> 
</html>

Quelle

2010-05-20 04:47:34 jdigital

Wow - das sieht sehr vielversprechend aus! Testen Sie es zurück zu Ihnen zurück. –

Das behebt definitiv das Problem, und da es nur die THs durchlaufen muss, gibt es keine Verlangsamung. Sie sind fantastisch, danke, danke, danke! –

Froh, dass das für dich geklappt hat. Ich bin zu dem Schluss gekommen, dass dies ein Fehler in IE7 ist. Wenn es auf einer langsamen Maschine zu Leistungsproblemen kommt, sogar zu einer leichten Verzögerung, möchten Sie möglicherweise die jQuery-Aufrufe so konditionieren, dass sie nur bei Bedarf verwendet werden. – jdigital

dieses Doctype Deklaration Versuchen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Quelle

2010-05-20 02:18:28 edl

Wie würde das einen Unterschied machen? Sein Docctype ist völlig in Ordnung. Warum von HTML zu XHTML wechseln? – BalusC

Entschuldigung. bearbeitet. Wenn Sie einen falsch deklarierten Doctype haben, geht IE in Quirks-Modus, glaube ich. – edl

Danke für den Fang, ich habe das "!" im Doctype. Hinzugefügt in, aber es machte keinen Unterschied. –

noch nicht eine Erklärung, warum IE dies tut haben Sie, aber hier ist was passiert und hier ist, wie um ihn zu arbeiten.

1) Wenn Sie die Tabellenklasse im HTML auf 'hide1 hide2' setzen, dann wird die Tabelle richtig gerendert (keine Lücke). Daher scheint das Problem damit zu tun zu haben, wie IE Änderungen an Tabellen über Styles behandelt.

2) Der Abstand zwischen den Spalten ist die Breite der überspannten Spaltenüberschrift.

3) Wenn Sie Spaltenüberspannung (und die zusätzlichen Spalten) beseitigen, dann funktioniert alles gut.

Ich habe zwei Problemumgehungen gefunden. Die erste besteht darin, Code zum Umschalten der Anzeige zu verwenden, aber Sie haben diese Option abgelehnt.

Die Alternative ist, die Colspans zu beseitigen. Es gibt eine Vielzahl von Möglichkeiten, dies zu tun. Eine besteht darin, die zu überspannende Zellengruppe in eine eingebettete Tabelle umzuwandeln (das heißt, anstelle von zwei TD-Elementen haben Sie ein TD, das eine TABELLE mit einem TR und zwei TDs enthält). Oder Sie können SPANs für saubereren Code verwenden (mit einem BORDER-RIGHT für alle Zellen außer dem letzten).

Quelle

2010-05-20 03:27:08 jdigital

Die Eliminierung der Colspans ist keine gute Problemumgehung, da die Breite der SPANs oder der TDs in der eingebetteten TABLE abhängig vom Wert in der Zelle variieren wird - also wird der Rahmen nicht wie eine Tabelle auf der Seite ausgerichtet. Was meinen Sie mit Code, um die Anzeige umzuschalten - ich lehnte eine bestimmte Implementierung ab, weil sie wesentlich langsamer war, aber vielleicht gibt es einen Weg, der ähnliche Ergebnisse zu dieser Methode liefert? –

Danke für den Versuch - das funktioniert nur für eine Zeile. Wie ich bereits erwähnt habe, versuche, ein paar weitere TR-Datenzeilen mit unterschiedlichen Längenwerten in den TDs hinzuzufügen und zu sehen, wie die Grenzlinie nicht auf der Seite ausgerichtet ist. –

Um dies im Code zu tun, behalten Sie, was Sie bereits haben, und erweitern Sie dann die Toggle-Funktion, um alle TH-Elemente zu durchlaufen und ihre style.display explizit auf 'none' (oder auf eine leere Zeichenfolge, wenn Sie wollen) um die Spalten wieder sichtbar zu machen). Die gute Nachricht ist, dass Sie nur die TH-Zellen tun müssen, nicht die TDs, also könnte dies effizient genug sein. – jdigital

IE7 macht mein Leben miserabel! Lücken zwischen HTML-Tabellenspalten (w/colspan) mit css toggle

Antwort

Verwandte Themen