Formatierungsfehler unter iOS Safari

[Einsiedler]

Hallo zusammen,
ich habe ein seltsames Problem mit einer Tabelle unter jQuery mobile für meine mobile Website und zwar nur unter Safari für iOS.

So sieht die gesamte Tabelle aus. Pro Spalte ist hier eine Tabelle, da das ganze mit einer ul verschachtelt ist. Ich habe hier farblich die einzelnen td's markiert.
beige: gesamte Tabelle
blau: erstes td
rot: zweites td
aqua: drittes td
grün: span-Element in zweitem td

Normalerweise sollte das ganze linksbündig sein, wie in jeder anderen Tabelle auch (übrigens auch in jedem anderen Browser, auch zB am Desktop: http://einsiedler98.bplaced.net/m/fotoalbum/).

Hier der HTML-Snippet:

<table border="0" width="100%" cellpadding="0px" cellspacing="0px">
    <thead>
        <col width="60px">
        <col width="98%">
        <col width="2%">
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="image_collection">
                    <div class="picture1"><img src="/fotoalbum/fotos/2014/Benkfest/Benkfest2014_06.jpg" /></div>
                    <div class="picture2"><img src="/fotoalbum/fotos/2014/Benkfest/Benkfest2014_12.jpg" /></div>
                    <div class="picture3"><img src="/fotoalbum/fotos/2014/Benkfest/Benkfest2014_14.jpg" /></div>
                </div>
            </td>
            <td align="left" style="background: red;">
                <div class="puffer"></div>
                <span class="text">Benkfest</span>
            </td>
            <td style="background: aqua;">
                <img class="li_pfeil" src="/m/bilder/fotoalbum_arrow.png" />
            </td>
        </tr>
    </tbody>
</table>

CSS

.yearbody ul li table {
border-collapse: collapse;
padding: 0;
margin: 0;
border: 0;
height: 80px;
background: beige;
}
.yearbody ul li table tbody tr td {
padding: 0 !important;
margin: 0px;
vertical-align: top !important;
text-align: left !important;
}
.puffer {
display: none;
height: 100%;
width: 5%;
float: left;
background: aqua;
}
.text {
top: 20px;
width: 100%;
float: left;
margin-left: 0%;
position: relative;
font-size: 1em;
color: #333333;
background: green;
}

Der Puffer dient eigentlich einem gleichmäßigem Abstand, ist momentan mit display:none aber außer Funktion, am Desktop jedoch eigentlich voll funktionsfähig.
Was ist hier bitte falsch??

Gruß Einsiedler

 

[pax]

Du hättest das Problem gar nicht, wenn du nicht mit Tabellen arbeiten würdest. Die haben an der Stelle nichts zu suchen.
Wenn du es aber tust, musst du es wenigstens richtig machen. der <col> tag ist nur innerhalb einer <colgroup> gültiges html, nicht in <thead>. Die Breitenangaben kannst du den <td>'s der ersten Zeile geben, wenn du keine <th>'s hast. Dabei musst du aber auch darauf achten, dass die Gesamtbreite 100% nicht überschreitet. Bei dir tut sie das. 98%+2% +60px sind 100% + 60px. Lösen kannst du sowas zum Beispiel mit css calc().

Wenn das überhaupt irgendwo ordentlich aussieht, dann nur weil die meisten Browser heutzutage eine hohe Fehlertoleranz haben und falsche Angaben ignorieren bzw. fehlende zu ersetzen versuchen. Der Safari macht das in der Regel weniger gut als die anderen Browser.

 

[Einsiedler]

Danke pax,
die colgroup-Tags habe ich ja tatsächlich vergessen. Diese alleine mit gescheiten Breitenangaben in Prozent erzielten aber leider immer noch keine Besserung.
Ich habe die Breiten jetzt über CSS mit den Selektoren td:first-child, td:nth-child(2) und td:last-child und mit CSS calc eingegeben und die <colgroup> entfernt und nun funktioniert es.