Profil von allknownissue

15.07.2015, 19:02

Hallo liebe Experten :)

Ich habe eine Tabelle in der Desktop-version eingebunden. Auf der Mobilen (Responsive) Version, sollte diese Tabelle nicht mehr vorhanden sein. Einfach ausgeblendet und kein Weisses Feld statt der Tabelle, sondern einfach weg.

Ich bin noch Anfänger, also bitte nicht nur Codes schicken, sondern bitte kurz dazu sagen, wo ich de Code genau einfügen muss. Also welche Datei und welche Stelle.

Danke an alle im Voraus.

mfg Alex

...zum Beitrag

Hilfreichste Antwort

von 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...

...zur Antwort