IE8 wird die Größe von tbody oder thead nicht ändern, wenn eine Spalte in einer Tabelle mit Tabellenlayout ausgeblendet ist: fixed

IE 8 macht etwas sehr merkwürdig, wenn ich eine Spalte in einer Tabelle mit Tabellenlayout verstecke: behoben. Die Spalte ist ausgeblendet, das Tabellenelement bleibt gleich breit, aber die tbody- und thead-Elemente werden nicht so skaliert, dass sie die verbleibende Breite ausfüllen. Es funktioniert im IE7-Modus (und FF, Chrome, etc. natürlich). Hat jemand das schon einmal gesehen oder kennt einen Workaround?IE8 wird die Größe von tbody oder thead nicht ändern, wenn eine Spalte in einer Tabelle mit Tabellenlayout ausgeblendet ist: fixed

Hier ist meine Testseite - die erste Spalte wechseln und die Entwickler-Konsole verwenden, um die Tabelle, tbody und thead Breite zu überprüfen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
    <title>bug</title> 
    <style type="text/css"> 
     table { 
     table-layout:fixed; 
     width:100%; 
     border-collapse:collapse; 
     } 
     td, th { 
     border:1px solid #000; 
     } 
    </style> 
    </head> 
    <body> 
    <table> 
     <thead> 
     <tr> 
      <th id="target1">1</th> 
      <th>2</th> 
      <th>3</th> 
      <th>4</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <td id="target2">1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     </tbody> 
    </table> 
    <a href="#" id="toggle">toggle first column</a> 
    <script type="text/javascript"> 
     function toggleFirstColumn() { 
     if (document.getElementById('target1').style.display=='' || 
      document.getElementById('target1').style.display=='table-cell') { 
      document.getElementById('target1').style.display='none'; 
      document.getElementById('target2').style.display='none'; 
     } else { 
      document.getElementById('target1').style.display='table-cell'; 
      document.getElementById('target2').style.display='table-cell'; 
     } 
     } 
     document.getElementById('toggle').onclick = function(){ toggleFirstColumn(); return false; }; 
    </script> 
    </body> 
</html>

Quelle

2010-04-16 Tom Terrace

Ein einfacher Work-Around für IE8 besteht darin, der Tabelle einen Nudge zu geben, damit IE8 die Spaltenbreite basierend auf den verbleibenden Spalten anpassen kann. Unter der Annahme, table Punkte, die auf den Tisch, tun folgende dem Trick:

table.style.display = "inline-table"; 
window.setTimeout(function(){table.style.display = "";},0);

Credits: ich über diese Technik aus Srikanth's blog zuerst lesen. Und als Referenz, hier ist die updated example mit dieser Technik.

^{Ich sollte jedoch beachten, dass diese Technik nicht funktioniert immer arbeiten. Ich sehe einen Fall in einer komplizierteren App, bei der keine Stiländerung möglich ist, IE zu überzeugen, die Anzahl der Spalten zu berücksichtigen (sorry, ich habe keinen einfacheren reproduzierbaren Fall). Glücklicherweise löst IE9 dieses Problem vollständig.}

Quelle

2011-05-21 03:25:30 avernet

Ich habe das gerade verifiziert - Danke! Das ist viel besser als der Hack, den ich gepostet habe. –

@tom, danke, und ich bin froh, dass das geholfen hat. – avernet

Das hat nicht für mich funktioniert. Ich musste die Tabelle zuerst in einem settimeout ausblenden und dann in einem verschachtelten settimeout wieder anzeigen. – Urbycoz

einfach einen gemeinen Hack gefunden - eine sichtbare Spalte auswählen, die füllen sollte up den leeren Raum und geben Sie ihm die Klasse "Colspanfix". Rufen Sie diese Funktion nach der anderen Spalte umgeschaltet (jquery der Kürze halber verwendet wird):

function fixColspans(tableId) { 
    if ($('#' + tableId).width() > $('#' + tableId + ' tbody').width()) { 
    var current = $('#' + tableId + ' .colspanfix').attr('colspan'); 
    $('#' + tableId + ' .colspanfix').attr('colspan', ++current); 
    } 
}

Es wird überprüft, ob das Tabellenelement breiter als das tbody Element ist dann weist sie einen colspan Wert auf die Elemente mit der „colspanfix "Klasse. Der Kicker ist, dass er den Colspan für jedes Hide/Show um eins erhöhen muss. Nicht sehr hübsch, aber es funktioniert.

Quelle

2010-04-16 17:01:59

Ein Nachteil dieser Technik ist, dass sie die Breite der Spalte erhöht, auf der Sie den 'colspanfix' haben, während Sie die Breite der anderen Spalten nicht erhöhen. I.e. danach haben Sie keine Situation mehr, in der alle Spalten die gleiche Breite haben (was in Abhängigkeit von Ihrem Anwendungsfall möglicherweise nicht der Fall ist). – avernet

IE8 wird die Größe von tbody oder thead nicht ändern, wenn eine Spalte in einer Tabelle mit Tabellenlayout ausgeblendet ist: fixed

Antwort

Verwandte Themen