How to apply style classes to td elements?

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!

If your question relates to php, the posted code is fine. If it relates to css/html, please show the rendered html as seen by the browser: the <?php ... ?> server side scripts are irrelevant to CSS. — David Thomas
– David Thomas, Commented Mar 15, 2011 at 12:55

bad_coder · Accepted Answer · 2021-04-09 23:24:49Z

90

Give the table a class name and then you target the td's with the following:

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

edited Apr 9, 2021 at 23:24

bad_coder

13.2k20 gold badges59 silver badges95 bronze badges

answered Mar 15, 2011 at 12:47

moleculezz

7,7134 gold badges27 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

martincarlin87 Over a year ago

Hi, that works great for the font but for some reason I can't get the columns to space themselves out more using margin-left on the th or td elements.

Ryan Over a year ago

@moleculezz Not sure if you still come on here but if so why use class instead of id?

moleculezz Over a year ago

@Ryan Best practice suggests to use classname instead of ID's. Search the net and you will find lots of information about it.

bad_coder · Accepted Answer · 2021-04-09 23:28:07Z

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.

Hi, shows is the name of the overall class that the table is inside, the # were stripped out by the site so it should begin the line with that symbol.

bad_coder · Accepted Answer · 2021-04-09 23:25:51Z

8

Try this

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

edited Apr 9, 2021 at 23:25

bad_coder

13.2k20 gold badges59 silver badges95 bronze badges

answered Feb 19, 2014 at 6:04

lecaoquochung

1331 silver badge5 bronze badges

1 Comment

legends2k Feb 13 at 14:10

If you've a table class too, you can change the selector to .mytable td.mytd.

GG. · Accepted Answer · 2021-04-10 00:42:00Z

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:

Starx · Accepted Answer · 2011-03-15 13:00:47Z

4

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

answered Mar 15, 2011 at 13:00

Starx

79.3k50 gold badges187 silver badges266 bronze badges

2 Comments

martincarlin87 Over a year ago

Thanks for all your replies, I learnt a lot from it, I found out that cellspacing was the way to go but it seems you can only add that to the table declaration itself and not in the css file?

Nicolas Le Thierry d'Ennequin Over a year ago

Yes, because cellspacing is an HTML attribute, not a CSS property. But you should be able to achieve what you want using CSS (see border-collapse, border-spacing...).

Hamza Abdaoui · Accepted Answer · 2019-03-12 08:47:04Z

3

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

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

edited Mar 12, 2019 at 8:47

Hamza Abdaoui

2,2274 gold badges26 silver badges39 bronze badges

answered Aug 23, 2016 at 9:04

Elamathi Rajendran

591 bronze badge

Comments

Slayer6 · Accepted Answer · 2016-01-23 19:17:00Z

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.

Collectives™ on Stack Overflow

How to apply style classes to td elements?

7 Answers 7

3 Comments

2 Comments

1 Comment

Comments

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

2 Comments

1 Comment

Comments

2 Comments

Comments

Comments

Linked

Related