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?