Wie wendet man Stilklassen auf td-Elemente an?

Lesezeit: 5 Minuten

Benutzer-Avatar
martincarlin87

Was ich herauszufinden versuche, ist die richtige Syntax, um jedem Individuum einen gewissen Stil zu verleihen td in meiner Tabelle unten:

<section id="shows">
<!-- HTML5 section tag for the shows 'section' -->

<h2 class="gig">Shows</h2>

<ul class="gig">

    <!-- Start the table -->
    <table>
        <tr>
            <!-- Setup the header row -->
            <th>When</th>
            <th>Where</th>
            <th>Start</th>
            <th>Finish</th>
        </tr>

        <?php
            // some PHP to fetch all the gig entries from the shows table
            $shows_query = "SELECT * FROM shows ORDER BY date ASC";
            $shows = mysql_query($shows_query);
            // a loop to place all the values in the appropriate table cells
            while ($show = mysql_fetch_array($shows)){
            //begin the loop...
            ?>

        <!-- Start the row -->
        <tr>

            <!-- Format the date value from the database and print it: -->
            <td class="when"><?php 
            $date = date("l, F j, Y", strtotime($show['date'])); 
            echo "$date";
            ?></td>

            <td class="venue"><?php
            echo $show['venue'];
            ?></td>

            <!-- Format the start and end times and print them: -->
            <td class="start"><?php
            $time = date("G:i", strtotime($show['time'])); 
            echo "$time";
            ?></td>

            <td class="finish"><?php
            $until = date("G:i", strtotime($show['until']));
            echo "$until";
            ?></td>

            <!-- Finish this row -->
        </tr>

        <!-- Some space before the next row -->
        <div class="clear"></div>

        <?php 
            // close the loop:
             }
             ?>
        <!-- Finish the table -->
    </table>
</ul>

</section>

Das Styling, das ich im Moment habe, ist:

#shows table.gig { font-size: 25px; }
#shows td.finish { margin-left: 50px;}

Ich hatte eine Klasse für den Tisch selbst, bin mir aber nicht sicher, ob es notwendig ist.

Die Schriftgröße funktioniert, aber was ich nicht herausfinden kann, ist, wie ich den Stil auf die anwenden soll td, th, tr Elemente usw. Ich habe mehrere Dinge ausprobiert, aber ich kann es nicht zum Laufen bringen!

  • Wenn sich Ihre Frage auf PHP bezieht, ist der gepostete Code in Ordnung. Wenn es sich um css/html handelt, zeigen Sie bitte die gerendert html wie vom Browser gesehen: die <?php ... ?> serverseitige Skripte sind für CSS irrelevant.

    – David Thomas

    15. März 2011 um 12:55 Uhr

Benutzer-Avatar
Molekülzz

Geben Sie der Tabelle einen Klassennamen und zielen Sie dann auf die tdist mit folgendem:

table.classname td {
    font-size: 90%;
}

  • Hallo, das funktioniert großartig für die Schriftart, aber aus irgendeinem Grund kann ich die Spalten nicht dazu bringen, sich mehr zu verteilen margin-left auf den th- oder td-Elementen.

    – martincarlin87

    15. März 2011 um 12:59 Uhr

  • @moleculezz Ich bin mir nicht sicher, ob du hier noch weiterkommst, aber wenn ja, warum verwendest du class anstelle von id?

    – Ryan

    18. November 2013 um 21:17 Uhr

  • @Ryan Best Practice schlägt vor, Klassennamen anstelle von IDs zu verwenden. Suchen Sie im Netz und Sie werden viele Informationen darüber finden.

    – Molekülzz

    20. November 2013 um 12:14 Uhr

Benutzer-Avatar
Nicolas Le Thierry d’Ennequin

Wenn ich mich gut erinnere, wenden Sie einige CSS-Eigenschaften an table werden nicht wie erwartet vererbt. Also sollte man den Style ja direkt anwenden td,tr und th Elemente.

Wenn Sie jeder Spalte Stile hinzufügen müssen, verwenden Sie die <col> Element in Ihrer Tabelle.

Sehen Sie hier ein Beispiel: https://jsfiddle.net/GlauberRocha/xkuRA/2/

NB: Sie können keine haben margin in einem td. Verwenden padding stattdessen.

  • Hallo zusammen, zeigt der Name der Gesamtklasse, die der Tisch drinnen hat # wurden von der Website entfernt, sodass die Zeile mit diesem Symbol beginnen sollte.

    – martincarlin87

    15. März 2011 um 12:52 Uhr


  • Dies ist eher ein Kommentar als eine Antwort.

    – Starx

    15. März 2011 um 13:01 Uhr

Benutzer-Avatar
lecaoquochung

Versuche dies

table tr td.classname
{
 text-align:right;
 padding-right:18%;
}

Benutzer-Avatar
GG.

Du kannst den … benutzen :first-child, :nth-child(N) und :last-child Pseudo-Klassen.

Sie ordnen Elemente basierend auf ihrer Position in einer Gruppe von Geschwistern zu. In Ihrem Fall:

table td:first-child  { /* 1st element */ }
table td:nth-child(2) { /* 2nd element */ }
table td:nth-child(3) { /* 3rd element */ }
table td:last-child   { /* 4th element */ }

Dokumente:

Eine eindeutigere Möglichkeit, ein td anzuvisieren, ist table tr td { }

  • Vielen Dank für all Ihre Antworten, ich habe viel daraus gelernt, ich habe herausgefunden, dass Cellspacing der richtige Weg ist, aber es scheint, dass Sie das nur zur Tabellendeklaration selbst und nicht zur CSS-Datei hinzufügen können?

    – martincarlin87

    15. März 2011 um 13:11 Uhr


  • Ja, weil cellspacing ist ein HTML-Attribut, keine CSS-Eigenschaft. Aber Sie sollten in der Lage sein, mit CSS zu erreichen, was Sie wollen (siehe border-collapse, border-spacing…).

    – Nicolas Le Thierry d’Ennequin

    15. März 2011 um 13:24 Uhr

Benutzer-Avatar
Hamza Abdaoui

Erstellen Sie einfach einen Klassennamen und definieren Sie dort Ihren Stil wie folgt:

table.tdfont td {
  font-size: 0.9em;
}

  • Vielen Dank für all Ihre Antworten, ich habe viel daraus gelernt, ich habe herausgefunden, dass Cellspacing der richtige Weg ist, aber es scheint, dass Sie das nur zur Tabellendeklaration selbst und nicht zur CSS-Datei hinzufügen können?

    – martincarlin87

    15. März 2011 um 13:11 Uhr


  • Ja, weil cellspacing ist ein HTML-Attribut, keine CSS-Eigenschaft. Aber Sie sollten in der Lage sein, mit CSS zu erreichen, was Sie wollen (siehe border-collapse, border-spacing…).

    – Nicolas Le Thierry d’Ennequin

    15. März 2011 um 13:24 Uhr

Benutzer-Avatar
Jägerin6

Bei Verwendung mit einer reaktiven Bootstrap-Tabelle habe ich das nicht gefunden

table.classname td {

Syntax funktionierte, da es keine gab <table> überhaupt markieren. Oft verwenden Module wie dieses nicht das äußere Tag, sondern tauchen einfach direkt in die Verwendung ein <thead> und <tbody> höchstens zum Gruppieren.

Einfach so zu spezifizieren hat aber super funktioniert

td.classname {
    max-width: 500px;
    text-overflow: initial;
    white-space: wrap;
    word-wrap: break-word;
}

da es direkt überschreibt <td> und kann nur für die Elemente verwendet werden, die Sie ändern möchten. Vielleicht in Ihrem Fall verwenden

thead.medium td {
  font-size: 40px; 
}
tbody.small td {
  font-size:25px;
}

für eine konsistente Schriftgröße mit einer größeren Kopfzeile.

1186510cookie-checkWie wendet man Stilklassen auf td-Elemente an?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy