Hilfe zu CSS Table Style mit Mysql

[KeyT0ast3r]

Hallo

Vielleicht kann mir hier jemand weiterhelfen...
Folgendes Problem besteht:

Ich habe bei einem Style Generator eine Tabelle erstellt.
Jetzt wird diese über eine Datenbank ausgelesen aber nur ein Eintrag dort im Tabellen-Format ausgegeben.
Danach schreibt er wohl die Daten dort unter aber nicht in dem Tabellen-Format.

Hier der Screenshot:



Dort soll oben in der ersten Zeile Member / Gilde / Stufe angezeigt werden.
Darunter sollen dann z.B wenn man 50 Einträge in die Datenbank macht 50 ausgegeben werden.
Am Ende soll er alle SQL Einträge in dem Tabellen-Format diese ausgeben.

Hier mal der Code:

Die CSS Datei

.datagrid table { border-collapse: collapse;
            text-align: left; width: 100%;
              }
.datagrid {font: normal 12px/150% Arial, Helvetica, sans-serif;
            background: #fff; overflow: hidden;
            border: 3px solid #991821;
            -webkit-border-radius: 13px;
            -moz-border-radius: 13px;
            border-radius: 13px;
            }
.datagrid table td, .datagrid table th { padding: 8px 8px;}

.datagrid table thead th {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0022FF), color-stop(1, #80141C) );
            background:-moz-linear-gradient( center top, #0022FF 5%, #80141C 100% );
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0022FF', endColorstr='#80141C');
            background-color:#0022FF;
            color:#FFE600;
            font-size: 16px;
            font-weight: bold;
            border-left: 2px solid #B01C26;
            }
.datagrid table thead th:first-child { border: none; }
.datagrid table tbody td { color: #0022FF; border-left: 2px solid #B01C26;
            font-size: 16px;
            border-bottom: 2px solid #B01C26;
            font-weight: bold; 
            }
.datagrid table tbody .alt td { background: #B9F4B5;
 color: #383838;
            }
.datagrid table tbody td:first-child { border-left: none; }
.datagrid table tbody tr:last-child td { border-bottom: none; }

Die PHP Datei

    mysql_select_db($mysqldb, $connection) or die("Konnte die Datenbank nicht

    waehlen.");

     

   $sql = "SELECT * FROM `Angelzeug:` LIMIT 0, 25 ";

     

    $adressen_query = mysql_query($sql) or die("Anfrage nicht erfolgreich");

    ?>

     
<link rel="stylesheet" type="text/css" href="table-style.css">
     
<div class="datagrid">
<table>

    <thead>
        <tr>
            <th>Member</th>
            <th>Gilde</th>
            <th>Stufe</th>
        </tr>
    </thead>

</table>

    <?php

    while ($adr = mysql_fetch_array($adressen_query)){

    ?>   

<table>
    <tbody>
        
        <td><?=$adr['Member']?></td>

        <td><?=$adr['Gilde']?></td>
            
        <td><?=$adr['Level']?></td>
    </tbody>
</table>
</div>


    <?php

    }

    ?>

Also der Abruf der Inhalte über die DB funktioniert fehlerfrei nur wie gebe ich jetzt die Einträge richtig aus ?
So das die halt auch so bunt hinterlegt werden. Und das die Spalten richtig übereinanderstehen.

Vielleicht kann mir dort jemand weiterhelfen.
Danke schonmal...

Gruss Michael

 

[threadi]

Korrekt wäre die Schleife der Ergebnismenge so:

<div class="datagrid">
<table>

    <thead>
        <tr>
            <th>Member</th>
            <th>Gilde</th>
            <th>Stufe</th>
        </tr>
    </thead>
    <?php
    <tbody>
    while ($adr = mysql_fetch_array($adressen_query)){
    ?>   
        <tr>
         <td><?=$adr['Member']?></td>
         <td><?=$adr['Gilde']?></td>
         <td><?=$adr['Level']?></td>
       </tr>
    <?php
    }
?></table>
</div>

Tipp: Beachte den erzeugten HTML-Code. Denn der ist bei deiner PHP-Programmierung keineswegs valide und auch inhaltlich falsch.

Moderation: Verschoben von CSS zu PHP.

 

[KeyT0ast3r]

Danke für deine Hilfe.
Nur jetzt habe ich dies schon richtig ausgegeben.
Nur normal waren dann jeder 2te Eintrag andersfarbig unterlegt, damit man nicht in der Reihe verrutscht.
Vielleicht kannst du mir noch sagen wie ich dies hinbekomme.

Hier ist ein Bild wie es momentan aussieht:


Und so war es eigentlich über den Generator im Inet angegeben bzw. von mir generiert worden:



Werden ja jetzt schon alle Einträge in der Liste wiedergegeben nur halt auf einem konstanten weißen Hintergrund.

Gruß Michael

 

[threadi]

Auf das was der Generator erzeugt würde ich nicht zählen. Der baut dir einen fehlerhaften HTML-Code zusammen indem alle deine Datensätze in einzelnen Tabellen stehen. Korrekt wäre eine Tabelle für alles.

Für unterschiedlich gefärbte Zeilen müsstest Du keinen Generator verwenden. Setze einfach im HTML-Code für jede zweite Zeile eine extra Klasse ein und ergänze für diese Klasse im CSS eine andere Hintergrund- und Textfarbe. Der Generator hat so etwas hier schon angedacht wie ich finde:

.datagrid table tbody td { color: #0022FF; border-left: 2px solid #B01C26;
            font-size: 16px;
            border-bottom: 2px solid #B01C26;
            font-weight: bold; 
            }
.datagrid table tbody .alt td { background: #B9F4B5;
 color: #383838;
            }

D.h. wenn ein tr die Klasse alt bekommt, müsste die Hintergrundfarbe zu #B9F4B5 wechseln.

Du müsstest im PHP-Code folglich nur noch diese Klasse für jede zweite Zeile berücksichtigen. Dafür reicht eine kleine Bedingung:

<tr<?php if($classname=="alt"){?> class="alt"<? $classname = ""; }else{ $classname = "alt"; }?>>

 

[KeyT0ast3r]

Sorry aber ich stehe vielleicht gerade auf dem Schlauch...

Wo soll ich die zweite Klasse einfügen bzw. das was du in der Zeile geschieben hast...

<tr<?php if($classname=="alt"){?> class="alt"<? $classname = ""; }else{ $classname = "alt"; }?>>

Sorry das ich nochmal nachfrage ....

Gruß Michael

 

[Tronjer]

Warum nicht mit Modulo?

<?php
$adr = mysql_fetch_array($adressen_query);

foreach ($adr as $index=>$eintrag):
    $class = 1 == $index % 2 ? 'even' : 'odd';
?>
    <tr class="<? echo $class; ?>">
        <td><? echo $eintrag['Member']; ?></td>
        <td><? echo $eintrag['Gilde']; ?></td>
        <td><? echo $eintrag['Level']; ?></td>
    </tr>
<? endforeach ?>

btw. lässt sich die abwechselnde Formatierung der Tabellenzellen auch mit CSS ( nth-child() ) oder jQuery umsetzen. Das muss kein PHP sein.

 

[threadi]

Wo du das einfügst hat dir Tronjer im Beispiel schon gezeigt. In meinem Beispiel sieht man auch, dass es in das <tr>-Element muss damit die dazugehörige CSS-Angabe dann auch greift.