Hallo zusammen

ein sehr spezielles Problem mit einer Tabelle auf dem Smartphone, welches ich nicht nachvollziehen kann.

Ich habe eine Demoseite gebaut, um den 'mobile first' Ansatz zu testen. Verwendet habe ich dazu PocketGrid.
Alle anderen Seiten (ohne Tabelle) funktionieren wie gewünscht, sind identisch aufgebaut.

Nur die Seite mit der Tabelle erzeugt mir auf einem Nexus 4 (mit Chrome und Dolphin getestet, in Porträt und Landscape) einen horizontalen Scrollbalken. Siehe seitlichen Abstand im Screenshot. Auf dem PC kann ich das nicht nachvollziehen. Ebenso mit diversen online Tests nicht (z.B. Responsive Design Testing).

Testseite

Angehängte Grafiken

test.jpg (53,0 KB, 13x aufgerufen)

So sieht es bei mir mit Safari 6 (OS X) auch aus.
Table hat width:100% und ein seitliches padding.
box-sizing: border-box; für table, table * scheint zu helfen.

Edit:Je nach Browser. Mit meinem Safari habe ich die Scrollbalken dort auch. Mit Firefox nicht.

__________________
MfG
Jens

Danke dir! Das war es. Ich hatte es lokal nur mit FX und Chrome getestet. Im Zweifelsfall also mit allem testen was man hat.

Ja, denn FX gibt Tabellen per default box-sizing: border-box; - wahrscheinlich "for legacy resasons" (sprich: Um auch alte Tabellenlayouts noch korrekt darzustellen.)

__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)

Es reichte auch box-sizing: inherit; für table zu schreiben.
Deshalb vermutete ich ein Bug in der Vererbung.

__________________
MfG
Jens

Inwiefern Bug? box-sizing wird nicht automatisch vererbt, das muss man schon explizit deklarieren.

table nimmt den Wert seines Elternelementes an. Ist dies z.B. ein div mit dem Initialwert content-box, wird sich im FX z.B. bei einer Tabelle mit width und seitlicher border die Darstellung ändern, da Tabellen vom FX-Browser-CSS eine box-sizing-Deklaration mit dem Wert border-box bekommen.

Ist das Elternelement dagegen ein div mit box-sizing: border-box;, wird sich im FX auch nix ändern, da er table diesen Wert eh per default gibt. Wohl aber in Browsern, deren Browser-CSS table keine abweichende box-sizing-Deklaration geben, so dass Tabellen per default mit dem Wert content-box dargestellt werden, aber plötzlich border-box erben (weil dies per inherit für table deklariert wurde).

table nimmt den Wert seines Elterelementes an und alle Nachfahren erben ihn (th und td bekommen im Gegensatz zu table im FX-Browser-CSS keine box-sizing-Deklaration, haben also den Initialwert content-box). Das wäre eine explizit deklarierte Vererbung, ohne die border-box-Werte aber eben auch nicht vererbt würden - daher meine Frage, was Du mit Bug bzgl. Vererbung meinst.

__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)

Das habe ich aus Schönes neues CSS: box-sizing:
Den dort verlinkten w3.org-Abschnitt hatte ich nicht gelesen:

__________________
MfG
Jens

Okay, dann sind ja jetzt alle eventuellen Missverständlichkeiten ausgeräumt

Wie er auf
kommt, weiß ich nicht - das kann nur ein Fehler sein, denn ich glaube nicht, dass es jemals einen anderen Initialwert als content-box gab (egal ob CSS3 Basic User Interface Module oder CSS Advanced Layout Module), weder 2012, noch 2007 oder 2005 etc. (sein Artikel ist von 2009), und vererbbar war diese Eigenschaft auch nie.

__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)