How to apply style classes to td classes

Question

what I am trying to find out is the proper syntax to apply some style to each individual td in my table below   lt section id  quot shows quot  gt   lt  -- HTML5 section tag for the shows  section  -- gt    lt h2 class  quot gig quot  gt Shows lt  h2 gt    lt ul class  quot gig quot  gt        lt  -- Start the table -- gt       lt table gt           lt tr gt               lt  -- Setup the header row -- gt               lt th gt When lt  th gt               lt th gt Where lt  th gt               lt th gt Start lt  th gt               lt th gt Finish lt  th gt           lt  tr gt            lt  php                some PHP to fetch all the gig entries from the shows table              shows query    quot SELECT   FROM shows ORDER BY date ASC quot                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                  gt            lt  -- Start the row -- gt           lt tr gt                lt  -- Format the date value from the database and print it  -- gt               lt td class  quot when quot  gt  lt  php               date   date  quot l  F j  Y quot   strtotime  show  date                   echo  quot  date quot                 gt  lt  td gt                lt td class  quot venue quot  gt  lt  php             echo  show  venue                  gt  lt  td gt                lt  -- Format the start and end times and print them  -- gt               lt td class  quot start quot  gt  lt  php              time   date  quot G i quot   strtotime  show  time                   echo  quot  time quot                 gt  lt  td gt                lt td class  quot finish quot  gt  lt  php              until   date  quot G i quot   strtotime  show  until                  echo  quot  until quot                 gt  lt  td gt                lt  -- Finish this row -- gt           lt  tr gt            lt  -- Some space before the next row -- gt           lt div class  quot clear quot  gt  lt  div gt            lt  php                 close the loop                                gt           lt  -- Finish the table -- gt       lt  table gt   lt  ul gt    lt  section gt   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

User · Answer

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

User · Answer

Try this  table tr td classname    text-align right   padding-right 18

User · Answer

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

User · Answer

When using with a reactive bootstrap table  i did not find that the  table classname td     syntax worked as there was no  lt table gt  tag at all   Often modules like this don t use the outer tag but just dive right in maybe using  lt thead gt  and  lt tbody gt  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  lt td gt  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

User · Answer

Give the table a class name and then you target the td s with the following   table classname td       font-size  90

User · Answer

table classname td       font-size  90       worked for me  thanks

User · Answer

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  lt col gt  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

User · Answer

Simply create a Class Name and define your style there like this    table tdfont td     font-size  0 9em

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

Examples related to html

Examples related to css