How to apply style classes to td elements? - html

Question

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!

Answer 1

Give the table a class name and then you target the td's with the following:
table.classname td {
font-size: 90%;
}

Answer 2

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: https://jsfiddle.net/GlauberRocha/xkuRA/2/
NB: You can't have a margin in a td. Use padding instead.

Answer 3

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

Answer 4

You can use the :first-child, :nth-child(N) and :last-child pseudo-classes.
They match elements based on their position in a group of siblings. In your case:
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 */ }
Docs:
https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child

Answer 5

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

Answer 6

Simply create a Class Name and define your style there like this :
table.tdfont td {
font-size: 0.9em;
}

Answer 7

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.