Tabelle in Mobiler Version ausblenden?

4 Antworten

Vom Fragesteller als hilfreich ausgezeichnet
allknownissue
15.07.2015, 23:19

Es gibt vieeeele Varianten, sowas umzusetzen.

Schau hier vorbei: http://www.heise.de/ix/artikel/Allen-recht-1058764.html

und eventuell passt für dich sogar das untere Beispiel.

Mit Media Queries, die sich an der Browser-Breite (Fensterbreite) orientieren, ist das durchaus möglich.

Hier ist nun eine Breite von 767 Pixeln festgelegt, iPhone haben (glaube ich) 320 Pixel.

Z.B.:

im <head></head>

<style>
@media (max-width: 767px) {
  .hide-mobile {
    display: none;
  }
}
</style>

und im öffnenden HTML-Tag Deiner Tabelle fügst du noch hinzu:

<table class="hide-mobile">

Sollte die Tabelle bereits eine zugewiesene Klasse haben, ergänzt du zwischen den " einfach nur noch ein hide-mobile hinten dran.

Sollte das für alle Tabellen auf der Seite gültig sein, kannst du (anstatt dem Code-Snippet oben) im Style auch einfach...

<style>
@media (max-width: 767px) {
  table {
    display: none;
  }
}
</style>

machen...
EightSix
Nutzer, der sehr aktiv auf gutefrage ist
im Thema programmieren
15.07.2015, 19:33

Mit einem Responsive Framework wie z.b. Twitter Bootstrap könntest du dem Div oder der Tabelle die CSS Klasse xs-hidden zuweisen.

Keine Ahnung ob du ein Framework verwendest. Wenn nicht wäre es angeraten da es viel Arbeit abnimmt.
chrisswebb
16.07.2015, 15:15

Warum willst du die Tabelle ausblenden? Kannst doch Scrollleisten einblenden lassen dann ist die Seite auch responsive.

Ansonsten: display: none; blendet aus.
wolfgang1956
16.07.2015, 10:21

Durch bedingtes Compilieren kann man doch verschiedene Versionen einer Software erstellen.

  • Einmal die normale Desktop-Version compilieren
  • Bei der Mobile-Version muß die Tabelle doch gar nicht erst erscheinen. Einfach die entsprechenden Routinen auslagern oder sie nicht in der Version compilieren lassen … :-)