Tabelle: Abstände zwischen Zellen

[Gunther]

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:

Code Auswählen Erweitern

<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">&nbsp; &nbsp;</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">&nbsp; &nbsp;</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?

[Gunther]

hmm, niemand eine Idee? 

[MKeY]

puh, weiß nicht, ob ich dich richtig verstanden habe:

Code Auswählen Erweitern

<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="">&nbsp; &nbsp;</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="">&nbsp; &nbsp;</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>