Tabelle: rotate(270deg) mit Darstellungsproblemen

[Moadin]

Hallo zusammen

ich versuche seit längerem meine Tabelle ordentlich hinzubekommen, scheitere aber an diesem rotate-Befehl. Er rotiert zwar die Wörter richtig, nur werden die Zellen völlig falsch platziert. Alle werden quasi direkt übereinander gepackt und ich kriege das nicht weg.

Ziel: Ich möchte die Spaltenüberschriften senkrecht zu stehen bekommen und möglichst eng beieinander.

Hier der Code für die Tabelle:

echo'<table id="anmeldung">';

################################
# Disziplinen Herren abfragen
################################
$sql_disziplinen = 'SELECT fld_id, fld_disziplin FROM tbl_disziplinen WHERE fld_id NOT IN (2) ORDER BY fld_id';
$result = $db->prepare($sql_disziplinen);
$result->execute();
$result->bind_result($fld_id, $fld_disziplin);
echo '<caption id="anmeldung">Herren</caption>';
echo '<tr id="anmeldung">';
echo '<th id="anmeldung_schulen">Schulen</th>';
while ($result->fetch()) {
    echo '<th id="anmeldung">';
        echo $fld_disziplin;
    echo '</th>';
}
echo '</tr>';


################################
# Schulen abfragen
################################
$sql_schule= 'SELECT fld_id, fld_schule FROM tbl_schulen ORDER BY fld_schule';
$result_schule = $db->prepare($sql_schule);
$result_schule->execute();
$result_schule->bind_result($fld_id, $fld_schule);
while ($result_schule->fetch()) {
    echo '<tr>';
    echo '<td id="anmeldung_schulen">';
        echo $fld_schule;
    echo '</td>';
    ################################
    # Athleten pro Disziplin abfragen
    ################################
    $schleife = array(1,3,4,5,6,7,8,9);
    foreach($schleife as $zahl)
    {
        $db2 = new mysqli(HOST, USER, PASSWORD, DATABASE);
        $sql_anzahl= "SELECT COUNT(*) as anzahl FROM tbl_wahl as d, tbl_athleten as a 
        WHERE d.tbl_athleten_fld_id = a.fld_id
        AND a.tbl_schulen_fld_id = $fld_id
        AND a.tbl_geschlecht_fld_id = 1
        AND d.tbl_jahr_fld_id = $jahr
        AND d.tbl_disziplinen_fld_id = $zahl";
        $result_anzahl = $db2->query($sql_anzahl);
        while ($row = $result_anzahl->fetch_object()) {
            $anzahl = $row->anzahl;
            echo '<td id="anmeldung">'.$anzahl.'</td>';
        }
    }
    echo '</tr>';
}
echo '</table>'; 

Und noch der entsprechende CSS:

table#anmeldung {
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 6px;
    border: 2px solid;
    margin-bottom: auto;
}

caption#anmeldung {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 0.5em;
}

tr#anmeldung {
    width: 20em;
}

th#anmeldung {
    display: block;
    font-size: 0.8125em;
    -ms-transform: rotate(270deg); /* IE 9 */
    -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
    transform: rotate(270deg);
    border: 1px solid;
}

th#anmeldung_schulen {
    width: 10px;
    border: 1px solid;
    text-align: left;
}

td#anmeldung {
    width: 50px;
    text-align: center;
}

td#anmeldung_schulen {
    width: 100em;
    text-align: left;
}

Ich danke euch für eure Hilfestellungen!

Grüsse aus der Schweiz

Martin

[Durin]

Du solltest statt IDs (die nur einmal pro Dokument vorkommen sollten) Klassen verwenden, und zwar für jeden Elementtyp eine Klasse (nicht element#anmeldung).

Außerdem solltest du den -webkit--Winkel überprüfen, bei manchen webkit-Winkeln sind die gegenüber dem "normalen" versetzt, kann sein dass das bei transform auch so ist.