34

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!

bad_coder
  • 5,829
  • 13
  • 26
  • 41
martincarlin87
  • 9,630
  • 22
  • 92
  • 143
  • 3
    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 `` server side scripts are irrelevant to CSS. – David says reinstate Monica Mar 15 '11 at 12:55

7 Answers7

81

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

table.classname td {
    font-size: 90%;
}
bad_coder
  • 5,829
  • 13
  • 26
  • 41
moleculezz
  • 6,643
  • 4
  • 23
  • 24
  • 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. – martincarlin87 Mar 15 '11 at 12:59
  • @moleculezz Not sure if you still come on here but if so why use class instead of id? – Ryan Nov 18 '13 at 21:17
  • 1
    @Ryan Best practice suggests to use classname instead of ID's. Search the net and you will find lots of information about it. – moleculezz Nov 20 '13 at 12:14
8

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.

bad_coder
  • 5,829
  • 13
  • 26
  • 41
Nicolas Le Thierry d'Ennequin
  • 5,517
  • 5
  • 35
  • 53
6

Try this

table tr td.classname
{
 text-align:right;
 padding-right:18%;
}
bad_coder
  • 5,829
  • 13
  • 26
  • 41
lecaoquochung
  • 115
  • 1
  • 5
6

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:

GG.
  • 17,726
  • 11
  • 69
  • 117
3

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

Starx
  • 72,283
  • 42
  • 174
  • 253
  • 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? – martincarlin87 Mar 15 '11 at 13:11
  • 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...). – Nicolas Le Thierry d'Ennequin Mar 15 '11 at 13:24
2

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

table.tdfont td {
  font-size: 0.9em;
}
Hamza Abdaoui
  • 1,814
  • 2
  • 17
  • 28
Elamathi Rajendran
  • 49
  • 1
0

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.

Slayer6
  • 121
  • 6