Display-Block für td-Element funktioniert nicht in einigen Browsern

Ich muss eine reaktionsfähige table machen. Ich möchte alle td Elemente in der mobilen Ansicht wie eine einzelne Zeile verhalten. Ich habeDisplay-Block für td-Element funktioniert nicht in einigen Browsern

td{ 
    @media (max-width:768px) 
     { 
      display:block; 
     } 
    }

verwendet Dies funktioniert perfekt in Google Chrome, funktioniert aber nicht auf Mozilla Firefox Browser. In Mozilla td Element nimmt nicht die volle Breite, habe ich versucht width:100% für td, die nicht funktioniert. Wie kann ich dieses Problem beheben?

Google Chrome

Firefox

Quelle

2017-02-14 Kola

Haben Sie Tabellenlayout festgelegt: für Tabelle fixiert? –

wenn ich Tabellen-Layout verwende: fest dann td Element komprimiert sich nur auf seine ursprüngliche Breite ..... so habe ich dies versucht und jetzt seine Arbeit in Chrom und Mozilla ... Tabelle, thead, tbody, tfoot, tr, th, td { @media (max-breite: 768px) { display: block; } } – Kola

Einstellung aller Tabelle Kind Elemente zu Anzeige: Block arbeitete für mich ... nicht sicher, ob es eine gute Design-Praxis – Kola

Haben Sie die Breite zu setzen versucht: als auch Block für alle übergeordneten Elemente: 100% & Anzeige? also

td, tr, table, tbody { 
    width: 100%; 
    display block; 
}

Quelle

2017-02-14 07:25:51

Nach fast einer Stunde Debugging, das hat für mich funktioniert. Danke DM – Luke

Display-Block für td-Element funktioniert nicht in einigen Browsern

Antwort

Verwandte Themen