Fast wie im Screenshot zu sehen soll die Tabelle aussehen. Zwei Dinge möchte ich aber anders haben:
- Die Überschrift in den Spalten vor und hinter "+ Min" soll jeweils leer sein und in der Zeile darunter nicht grau
- die Tabelle soll sich über die ganze Spalte strecken und komplett grauen Hintergrund haben
So schaut mein Code aus:
<li data-row="8" data-col="1" data-sizex="10" data-sizey="5">
<div data-template="template_label_title.html" data-parameter='{"var_title":"Verkehr"}'></div>
<div class="cell">
<div class="col-18 top-narrow">
<div data-type="label" class="normal left-align bg-gray darker">Ziel</div>
<div data-type="label" class="normal left-align darker">Bielefeld</div>
<div data-type="label" class="normal left-align darker">Bückeburg</div>
<div data-type="label" class="normal left-align darker">Detmold</div>
<div data-type="label" class="normal left-align darker">Dielingen</div>
<div data-type="label" class="normal left-align darker">Gütersloh</div>
<div data-type="label" class="normal left-align darker">Herford</div>
<div data-type="label" class="normal left-align darker">Kirchlengern</div>
<div data-type="label" class="normal left-align darker">Landesbergen</div>
<div data-type="label" class="normal left-align darker">Lemgo</div>
<div data-type="label" class="normal left-align darker">Osnabrück</div>
<div data-type="label" class="normal left-align darker">Paderborn</div>
</div>
<div class="col-15 top-narrow">
<div data-type="label" class="normal bg-gray darker">[km]</div>
<div data-type="label" data-device="Verkehr_Bielefeld" data-get="distance" class="darker"></div>
<div data-type="label" data-device="Verkehr_Bueckeburg" data-get="distance" class="darker"></div>
<div data-type="label" data-device="Verkehr_Detmold" data-get="distance" class="darker"></div>
<div data-type="label" data-device="Verkehr_Dielingen" data-get="distance" class="darker"></div>
<div data-type="label" data-device="Verkehr_Guetersloh" data-get="distance" class="darker"></div>
<div data-type="label" data-device="Verkehr_Herford" data-get="distance" class="darker"></div>
<div data-type="label" data-device="Verkehr_Kirchlengern" data-get="distance" class="darker"></div>
<div data-type="label" data-device="Verkehr_Landesbergen" data-get="distance" class="darker"></div>
<div data-type="label" data-device="Verkehr_Lemgo" data-get="distance" class="darker"></div>
<div data-type="label" data-device="Verkehr_Osnabrueck" data-get="distance" class="darker"></div>
<div data-type="label" data-device="Verkehr_Paderborn" data-get="distance" class="darker"></div>
</div>
<div class="col-35 top-narrow">
<div data-type="label" class="normal right-align bg-gray darker">Dauer</div>
<div data-type="label" data-device="Verkehr_Bielefeld" data-get="duration_in_traffic" class="right-align darker"></div>
<div data-type="label" data-device="Verkehr_Bueckeburg" data-get="duration_in_traffic" class="right-align darker"></div>
<div data-type="label" data-device="Verkehr_Detmold" data-get="duration_in_traffic" class="right-align darker"></div>
<div data-type="label" data-device="Verkehr_Dielingen" data-get="duration_in_traffic" class="right-align darker"></div>
<div data-type="label" data-device="Verkehr_Guetersloh" data-get="duration_in_traffic" class="right-align darker"></div>
<div data-type="label" data-device="Verkehr_Herford" data-get="duration_in_traffic" class="right-align darker"></div>
<div data-type="label" data-device="Verkehr_Kirchlengern" data-get="duration_in_traffic" class="right-align darker"></div>
<div data-type="label" data-device="Verkehr_Landesbergen" data-get="duration_in_traffic" class="right-align darker"></div>
<div data-type="label" data-device="Verkehr_Lemgo" data-get="duration_in_traffic" class="right-align darker"></div>
<div data-type="label" data-device="Verkehr_Osnabrueck" data-get="duration_in_traffic" class="right-align darker"></div>
<div data-type="label" data-device="Verkehr_Paderborn" data-get="duration_in_traffic" class="right-align darker"></div>
</div>
<div class="col-2 top-narrow">
<div data-type="label" class="bg-gray"> </div>
</div>
<div class="col-18 top-narrow">
<div data-type="label" class="normal centered bg-gray darker">+ Min.</div>
<div data-type="label" data-device="Verkehr_Bielefeld" data-get="delay" class="darker"></div>
<div data-type="label" data-device="Verkehr_Bueckeburg" data-get="delay" class="darker"></div>
<div data-type="label" data-device="Verkehr_Detmold" data-get="delay" class="darker"></div>
<div data-type="label" data-device="Verkehr_Dielingen" data-get="delay" class="darker"></div>
<div data-type="label" data-device="Verkehr_Guetersloh" data-get="delay" class="darker"></div>
<div data-type="label" data-device="Verkehr_Herford" data-get="delay" class="darker"></div>
<div data-type="label" data-device="Verkehr_Kirchlengern" data-get="delay" class="darker"></div>
<div data-type="label" data-device="Verkehr_Landesbergen" data-get="delay" class="darker"></div>
<div data-type="label" data-device="Verkehr_Lemgo" data-get="delay" class="darker"></div>
<div data-type="label" data-device="Verkehr_Osnabrueck" data-get="delay" class="darker"></div>
<div data-type="label" data-device="Verkehr_Paderborn" data-get="delay" class="darker"></div>
</div>
<div class="col-2 top-narrow">
<div data-type="label" class="bg-gray"> </div>
</div>
<div class="col-10 top-narrow">
<div data-type="label" class="normal right-align bg-gray darker">Ankunft</div>
<div data-type="label" data-device="Verkehr_Bielefeld" data-get="eta" class="ight-align darker"></div>
<div data-type="label" data-device="Verkehr_Bueckeburg" data-get="eta" class="ight-align darker"></div>
<div data-type="label" data-device="Verkehr_Detmold" data-get="eta" class="ight-align darker"></div>
<div data-type="label" data-device="Verkehr_Dielingen" data-get="eta" class="ight-align darker"></div>
<div data-type="label" data-device="Verkehr_Guetersloh" data-get="eta" class="ight-align darker"></div>
<div data-type="label" data-device="Verkehr_Herford" data-get="eta" class="ight-align darker"></div>
<div data-type="label" data-device="Verkehr_Kirchlengern" data-get="eta" class="ight-align darker"></div>
<div data-type="label" data-device="Verkehr_Landesbergen" data-get="eta" class="ight-align darker"></div>
<div data-type="label" data-device="Verkehr_Lemgo" data-get="eta" class="ight-align darker"></div>
<div data-type="label" data-device="Verkehr_Osnabrueck" data-get="eta" class="ight-align darker"></div>
<div data-type="label" data-device="Verkehr_Paderborn" data-get="eta" class="ight-align darker"></div>
</div>
</div>
</li> Was muss ich anders machen?
hmm, niemand eine Idee? :-\
puh, weiß nicht, ob ich dich richtig verstanden habe:
<div class="cell">
<div class="col-18 top-narrow bg-gray ">
<div data-type="label" class="normal left-align darker">Ziel</div>
<div data-type="label" class="normal left-align darker">Bielefeld</div>
<div data-type="label" class="normal left-align darker">Bückeburg</div>
<div data-type="label" class="normal left-align darker">Detmold</div>
<div data-type="label" class="normal left-align darker">Dielingen</div>
<div data-type="label" class="normal left-align darker">Gütersloh</div>
<div data-type="label" class="normal left-align darker">Herford</div>
<div data-type="label" class="normal left-align darker">Kirchlengern</div>
<div data-type="label" class="normal left-align darker">Landesbergen</div>
<div data-type="label" class="normal left-align darker">Lemgo</div>
<div data-type="label" class="normal left-align darker">Osnabrück</div>
<div data-type="label" class="normal left-align darker">Paderborn</div>
</div>
<div class="col-15 top-narrow bg-gray ">
<div data-type="label" class="normal darker">[km]</div>
<div data-type="label" data-device="Verkehr_Bielefeld" data-get="distance" class="darker"></div>
<div data-type="label" data-device="Verkehr_Bueckeburg" data-get="distance" class="darker"></div>
<div data-type="label" data-device="Verkehr_Detmold" data-get="distance" class="darker"></div>
<div data-type="label" data-device="Verkehr_Dielingen" data-get="distance" class="darker"></div>
<div data-type="label" data-device="Verkehr_Guetersloh" data-get="distance" class="darker"></div>
<div data-type="label" data-device="Verkehr_Herford" data-get="distance" class="darker"></div>
<div data-type="label" data-device="Verkehr_Kirchlengern" data-get="distance" class="darker"></div>
<div data-type="label" data-device="Verkehr_Landesbergen" data-get="distance" class="darker"></div>
<div data-type="label" data-device="Verkehr_Lemgo" data-get="distance" class="darker"></div>
<div data-type="label" data-device="Verkehr_Osnabrueck" data-get="distance" class="darker"></div>
<div data-type="label" data-device="Verkehr_Paderborn" data-get="distance" class="darker"></div>
</div>
<div class="col-35 top-narrow bg-gray ">
<div data-type="label" class="normal right-align darker">Dauer</div>
<div data-type="label" data-device="Verkehr_Bielefeld" data-get="duration_in_traffic" class="right-align darker"></div>
<div data-type="label" data-device="Verkehr_Bueckeburg" data-get="duration_in_traffic" class="right-align darker"></div>
<div data-type="label" data-device="Verkehr_Detmold" data-get="duration_in_traffic" class="right-align darker"></div>
<div data-type="label" data-device="Verkehr_Dielingen" data-get="duration_in_traffic" class="right-align darker"></div>
<div data-type="label" data-device="Verkehr_Guetersloh" data-get="duration_in_traffic" class="right-align darker"></div>
<div data-type="label" data-device="Verkehr_Herford" data-get="duration_in_traffic" class="right-align darker"></div>
<div data-type="label" data-device="Verkehr_Kirchlengern" data-get="duration_in_traffic" class="right-align darker"></div>
<div data-type="label" data-device="Verkehr_Landesbergen" data-get="duration_in_traffic" class="right-align darker"></div>
<div data-type="label" data-device="Verkehr_Lemgo" data-get="duration_in_traffic" class="right-align darker"></div>
<div data-type="label" data-device="Verkehr_Osnabrueck" data-get="duration_in_traffic" class="right-align darker"></div>
<div data-type="label" data-device="Verkehr_Paderborn" data-get="duration_in_traffic" class="right-align darker"></div>
</div>
<div class="col-2 top-narrow">
<div data-type="label" class=""> </div>
</div>
<div class="col-18 top-narrow bg-gray ">
<div data-type="label" class="normal centered darker">+ Min.</div>
<div data-type="label" data-device="Verkehr_Bielefeld" data-get="delay" class="darker"></div>
<div data-type="label" data-device="Verkehr_Bueckeburg" data-get="delay" class="darker"></div>
<div data-type="label" data-device="Verkehr_Detmold" data-get="delay" class="darker"></div>
<div data-type="label" data-device="Verkehr_Dielingen" data-get="delay" class="darker"></div>
<div data-type="label" data-device="Verkehr_Guetersloh" data-get="delay" class="darker"></div>
<div data-type="label" data-device="Verkehr_Herford" data-get="delay" class="darker"></div>
<div data-type="label" data-device="Verkehr_Kirchlengern" data-get="delay" class="darker"></div>
<div data-type="label" data-device="Verkehr_Landesbergen" data-get="delay" class="darker"></div>
<div data-type="label" data-device="Verkehr_Lemgo" data-get="delay" class="darker"></div>
<div data-type="label" data-device="Verkehr_Osnabrueck" data-get="delay" class="darker"></div>
<div data-type="label" data-device="Verkehr_Paderborn" data-get="delay" class="darker"></div>
</div>
<div class="col-2 top-narrow">
<div data-type="label" class=""> </div>
</div>
<div class="col-10 top-narrow bg-gray ">
<div data-type="label" class="normal right-align darker">Ankunft</div>
<div data-type="label" data-device="Verkehr_Bielefeld" data-get="eta" class="right-align darker"></div>
<div data-type="label" data-device="Verkehr_Bueckeburg" data-get="eta" class="right-align darker"></div>
<div data-type="label" data-device="Verkehr_Detmold" data-get="eta" class="right-align darker"></div>
<div data-type="label" data-device="Verkehr_Dielingen" data-get="eta" class="right-align darker"></div>
<div data-type="label" data-device="Verkehr_Guetersloh" data-get="eta" class="right-align darker"></div>
<div data-type="label" data-device="Verkehr_Herford" data-get="eta" class="right-align darker"></div>
<div data-type="label" data-device="Verkehr_Kirchlengern" data-get="eta" class="right-align darker"></div>
<div data-type="label" data-device="Verkehr_Landesbergen" data-get="eta" class="right-align darker"></div>
<div data-type="label" data-device="Verkehr_Lemgo" data-get="eta" class="right-align darker"></div>
<div data-type="label" data-device="Verkehr_Osnabrueck" data-get="eta" class="right-align darker"></div>
<div data-type="label" data-device="Verkehr_Paderborn" data-get="eta" class="right-align darker"></div>
</div>
</div>