1. #1
    CoBalT's Avatar
    Registered
    13/08/03
    Location
    Stekene
    Posts
    5,056
    iTrader
    19 (100%)
    Mentioned
    4 Post(s)
    Reputation
    0/12

    Hulp gevraagd bij een responsive table met DIV

    Hello,

    Ik zit met onderstaande tabel: (voorbeeld in excel want hier tabel invoegen lukt blijkbaar niet met manieren)

    http://i.imgur.com/AOhp8Ef.png

    En dit zou zo moeten worden op mobiele toestellen:

    http://i.imgur.com/oyBExWr.png



    Ik wil dit aan de hand van DIV's doen.
    Voorlopig is dit mijn CSS code:

    Code:
    .table {
        display:table; 
    }
    
    .table-header {
        display:table-header-group;
        font-size:20px;
        color: #075EBA;
        border:none;
        border-bottom: 20px solid;
    }
    
    .table-row {
        display:table-row;
        ;
    }
    
    .table-cell {
        display:table-cell;
        padding: 10px 10px 10px 10px;
        border-style: solid;
    }
    
    @media screen and (max-width: 800px) {
            
        
        .table {
        display:block; 
    }
    
       .table-header {
        display:block;
        font-size:20px;
        color: #075EBA;
        position: relative;
    }
    
       .table-row {
        display:block;
        border-bottom:1px solid #eee;
        position: relative;
        ;
    }
    
       .table-cell {
        display:block;
        padding: 5px 5px 5px 5px;
        border-style: solid;
    }
        
    }
    De code in mijn template:

    Code:
     <div class="table">
     <div class="table-row">
     <div class="table-header">
     <div class="table-cell">Maandag</div>
     <div class="table-cell">Dinsdag</div>
     <div class="table-cell">Woensdag</div>
     <div class="table-cell">Donderdag</div>
     <div class="table-cell">Vrijdag</div>
     <div class="table-cell">Zaterdag</div>
     </div>
     <div class="table-row">
     <div class="table-cell"><?php print render($content ['field_maandag']); ?></div>
     <div class="table-cell"><?php print render($content ['field_dinsdag']); ?></div>
     <div class="table-cell"><?php print render($content ['field_woensdag']); ?></div>
     <div class="table-cell"><?php print render($content ['field_donderdag']); ?></div>
     <div class="table-cell"><?php print render($content ['field_vrijdag']); ?></div>
     <div class="table-cell"><?php print render($content ['field_zaterdag']); ?></div>
     </div>
     </div>
     </div>

    Met die code heb ik onderstaand resultaat

    Fullscreen:
    http://i.imgur.com/JHolPwP.png

    Mobile:
    http://i.imgur.com/lJKvLk0.png

    Het is dus nog niet wat het moet zijn in de mobile versie
    Kan iemand mij hier een stapje verder helpen?
    no votes  

  2. #2
    FiberMonkey's Avatar
    Registered
    19/01/12
    Location
    Kempen
    Posts
    1,298
    iTrader
    51 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Met Bootstrap is dit heel simpel op te lossen en het is een fluitje van een cent: CSS · Bootstrap
    no votes  

  3. #3
    CoBalT's Avatar
    Registered
    13/08/03
    Location
    Stekene
    Posts
    5,056
    iTrader
    19 (100%)
    Mentioned
    4 Post(s)
    Reputation
    0/12
    Quote Originally Posted by FiberMonkey View Post
    This quote is hidden because you are ignoring this member. Show
    Met Bootstrap is dit heel simpel op te lossen en het is een fluitje van een cent: CSS · Bootstrap
    Voor zover ik zie, wordt daar enkel een scrollbar aan toegevoegd. Dat is niet wat ik zoek.
    no votes  

  4. #4
    Senn0's Avatar
    Registered
    14/03/09
    Location
    Sint-Truiden
    Posts
    899
    iTrader
    26 (100%)
    Mentioned
    0 Post(s)
    Quote Originally Posted by CoBalT View Post
    This quote is hidden because you are ignoring this member. Show
    Voor zover ik zie, wordt daar enkel een scrollbar aan toegevoegd. Dat is niet wat ik zoek.
    Dit kan misschien wel helpen: https://css-tricks.com/responsive-data-tables/
    ...
    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in