Hoe pas ik stijlklassen toe op td-elementen?

Wat ik probeer te achterhalen is de juiste syntaxis om een bepaalde stijl toe te passen op elke individuele tdin mijn onderstaande tabel:

<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>

De styling die ik op dit moment heb is:

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

Ik had wel een klasse voor de tafel zelf, maar ik weet niet zeker of het nodig is.

De lettergrootte werkt, maar ik kom er niet achter hoe ik de stijl moet toepassen op de td, th, trelementen enz. Ik heb verschillende dingen geprobeerd, maar krijg het niet voor elkaar!

Antwoord 1, autoriteit 100%

Geef de tabel een klassenaam en dan target je de td‘s met het volgende:

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

Antwoord 2, autoriteit 10%

Als ik me goed herinner, worden sommige CSS-eigenschappen die u toepast op tableniet overgenomen zoals verwacht. Je moet de stijl dus rechtstreeks toepassen op td,tren thelementen.

Als u stijl aan elke kolom moet toevoegen, gebruikt u het element <col>in uw tabel.

Bekijk hier een voorbeeld: https://jsfiddle.net/GlauberRocha/xkuRA/2/

NB: je mag geen marginin een tdhebben. Gebruik in plaats daarvan padding.

Antwoord 3, autoriteit 7%

Probeer dit

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

Antwoord 4, autoriteit 7%

U kunt de pseudo-klassen :first-child, :nth-child(N)en :last-childgebruiken.

Ze matchen elementen op basis van hun positie in een groep broers en zussen. In jouw geval:

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 */ }

Documenten:

• https://developer.mozilla.org/ nl-NL/docs/Web/CSS/:eerste kind
• https://developer.mozilla.org/ nl-US/docs/Web/CSS/:nth-child
• https://developer.mozilla.org/ nl-US/docs/Web/CSS/:last-child

Antwoord 5, autoriteit 4%

Een meer duidelijke manier om een td te targeten is table tr td { }

Antwoord 6, autoriteit 2%

Maak eenvoudig een klassenaam aan en definieer daar uw stijl als volgt:

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

Antwoord 7

Bij gebruik met een reactieve bootstrap-tabel vond ik niet dat de

table.classname td {

syntaxis werkte omdat er helemaal geen <table>-tag was. Vaak gebruiken modules zoals deze niet de buitenste tag, maar duiken ze er gewoon in, misschien met behulp van <thead>en <tbody>voor het groeperen.

Gewoon op deze manier specificeren werkte echter prima

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

omdat het direct de <td>overschrijft en alleen kan worden gebruikt voor de elementen die u wilt wijzigen. Gebruik in jouw geval misschien

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

voor consistente lettergrootte met een grotere koptekst.