Archief - Hulp gevraagd bij een responsive table met DIV

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
C

CoBalT

Legacy Member
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?
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan