Responsive tabellen?

NicoGNicoG Berichten: 6 Member
Ik maak gebruik van het Lightspeed Conform Plus Tech thema. Daar heb ik een pagina aangemaakt met een tabel (4x4). Echter is deze niet responsive waardoor de tabel er op de smartphone (iPhone SE) niet netjes uitziet. De afbeeldingen in de tabel worden zeer klein gemaakt en de teksten worden tegen elkaar gedrukt. De leesbaarheid neemt daardoor af.

Is er een mogelijkheid om tabellen responsive te maken?

5 reacties

  • kielenkielen Berichten: 85 Member ✭
    @NicoG
    Je zou kunnen proberen te werken met DIV classes.
    Ik zat met het zelfde probleem en heb toen gekeken hoe lightspeet dat oplost. In chrome rechtermuisknop en dan kiezen voor inspecteren.
    Ik heb helemaal geen verstand van welke programma taal dan ook, dus misschien zondig ik tegen alle regels, maar bij mij werkt het redelijk.
    <div class="product col-xs-6 col-sm-3 col-md-3"> Alles wat je in de tabel wilt hebben </div>
    Volgens mij moet die md-3 in totaal op elf of 12 uitkomen. Dus in dit geval 4 rijen.
    Voorbeeld staat op: https://www.manivivendi.nl/chi-machine/#spavoet
    onder de titel " Welke type Chi Machine kiezen?"
    Kees Kielen

    www.manivivendi.nl
  • NicoGNicoG Berichten: 6 Member
    @kielen
    Dankjewel voor de reply. Had een vergelijkbare oplossing maar daarmee deed de tabel helaas nog niet wat ik voor ogen had.

    Na wat zoekwerk en proberen heb ik een juiste tabel weten te maken. :smiley:

    De betreffende code kijkt naar welk formaat scherm de gebruiker heeft en past daarop de tabel aan.

    De basis code die ik ervoor heb gebruikt is:

    Het betreft een stukje HTML met CSS verder niet heel spannend om toe te passen. Wellicht helpt deze code andere ook verder :)

    Had eigenlijk verwacht dat responsive tabellen iets is wat standaard beschikbaar is vanuit Lightspeed?

    Maar het is gelukt!
  • NynkeNynke Berichten: 372 Administrator, Lightspeed Staff moderator
    NicoG zei:
    Had eigenlijk verwacht dat responsive tabellen iets is wat standaard beschikbaar is vanuit Lightspeed?
    Nee dit moet met wat codeerwerk :) 
    eCom support nummer: +31 20 808 63 58
    Klik hier om een terugbelverzoek in te dienen.
    Voor algemene vragen en informatie, ga naar het helpcentrum
  • JoepLindenJoepLinden Berichten: 2 Member
    NicoG zei:
    @kielen
    Dankjewel voor de reply. Had een vergelijkbare oplossing maar daarmee deed de tabel helaas nog niet wat ik voor ogen had.

    Na wat zoekwerk en proberen heb ik een juiste tabel weten te maken. :smiley:

    De betreffende code kijkt naar welk formaat scherm de gebruiker heeft en past daarop de tabel aan.

    De basis code die ik ervoor heb gebruikt is:

    Het betreft een stukje HTML met CSS verder niet heel spannend om toe te passen. Wellicht helpt deze code andere ook verder :)

    Had eigenlijk verwacht dat responsive tabellen iets is wat standaard beschikbaar is vanuit Lightspeed?

    Maar het is gelukt!
    Kijk even of je thema gebruik maakt van bootstrap (paginabron inspecteren en zoeken naar "bootstrap").

    Zoja? gebruik dan 

    <table class="table">

    thats all.. bootstrap maakt de tabel responsive. Scheelt misschien een hoop werk in de toekomst!
    Mvg,

    Joep van der Linden
    Lightspeed developer
  • kielenkielen Berichten: 85 Member ✭
    @JoepLinden dat ziet er leuk uit. Ik heb het uitgeprobeerd. Ik heb namelijk 2 bootstrap bestanden gevonden een .css en een .js .
    Dus ik heb de bestaande <tabel style> tag vervangen door <div class="table-responsive"><table class="table">.....</div>. Zonder de div class werkt het bij mij niet.
    De tabel krijgt een iets andere opmaak en reageert anders dan de door mij boven beschreven. Bij een smaller beeld gaat bij mijn oplossing de rijen van de tabel onder elkaar staan, bij jou kan je de tabel naar rechts en links scrollen.
    De oplossing van @NicoG heb ik nog niet geprobeerd.

    En @Nynke: Waar je constant hoort dat mobiel de toekomst is mag je van Lightspeed verwachten dat de editor daar ook in mee gaat. Een niet responsive tabel in je editor is echt niet meer van deze tijd. Zeker voor de niet programmerende klanten is dit een gemis. Misschien kan je er een ticket voor aanmaken? Maak dan ook meteen een ticket aan voor een schermvullend broncode veld. Het is nu echt turen en zoeken op dat kleine schermpje. 
    Kees Kielen

    www.manivivendi.nl
Log In of Registreer om te reageren.