[html] How to apply style classes to td classes?

what I am trying to find out is the proper syntax to apply some style to each individual td in my table below:

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

The styling that I have at the moment is:

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

I did have a class for the table itself but not sure if it's necessary.

The font-size works but what I can't figure out is how to apply the style to the td, th, tr elements etc. I have tried several things but can't seem to get it to work!

Any help much appreciated.

Thanks.

If I remember well, some CSS properties you apply to table are not inherited as expected. So you should indeed apply the style directly to td,tr and th elements.

If you need to add styling to each column, use the <col> element in your table.

See an example here: http://jsfiddle.net/GlauberRocha/xkuRA/2/

NB: You can't have a margin in a td. Use padding instead.

You can use :nth-child(N) CSS selector like :

table td:first-child {}  //1
table td:nth-child(2) {} //2
table td:nth-child(3) {} //3
table td:last-child {}   //4

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

worked for me. thanks.

When using with a reactive bootstrap table, i did not find that the

table.classname td {

syntax worked as there was no <table> tag at all. Often modules like this don't use the outer tag but just dive right in maybe using <thead> and <tbody> for grouping at most.

Simply specifying like this worked great though

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

as it directly overrides the <td> and can be used only on the elements you want to change. Maybe in your case use

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

for consistent font sizing with a bigger header.

Simply create a Class Name and define your style there like this :

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

Try this

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

A more definite way to target a td is table tr td { }