Table Header Styling

[shackwm60]

I have some basic CSS that sets the defaultstyle for all table headers.

table th {
	   padding-top: 9px;
	   font-weight: bold;
	   vertical-align: middle;
	 }	
	

I also have another table in a report output that i want the headers to be a slightly different. so i thought i would create a class for them since they will appear 4 times in the report. This is what i tried.

table th .formheader {
			text-align: center
			font-size: 1.5em;
		     }

And here is the html:

<tr>
<th colspan="2" class="formheader">Insurance Info</th>
</tr>

And ive attached a screenie of what it looks like but essentially its not taking the formheader stuff. Im sure i am overlooking something stupid as i am still new to this. Please assist?
Thanks for looking.

[possien]

You might try this:

 

th {
     padding-top: 9px;
     font-weight: bold;
     vertical-align: middle;
     }

.formheader {
text-align: center;
font-size:1.5em;
 }

 

just create a class called .formheader.  You forgot the semi-colon after the text-align: center .  The th tag is a decendent of the table tag so you don't need to reference it in css.  You are only styling the th.

[shackwm60]

Thank you that did it. I will re-read the subject of CSS descendants vs child selectors. apparently i dont understand it well enough.

[kicken]

 

table th .formheader {
			text-align: center
			font-size: 1.5em;
		     }

... Im sure i am overlooking something stupid as i am still new to this. Please assist?

 

The reason what you tried doesn't work is because of the space between th and .formheader. With the space it is looking for an element with class .formheader that is a descendant of a th element, for example:

<th><span class="formheader">Blah</span> Blah</th>

In order for it to seek a th which itself has the .formheader class you need to remove the space, eg:

table th.formheader

As mentioned though, using the table tag, and a th prefix on the class is likely unnecessary unless you need that level of specificity to overcome previous rules.

[shackwm60]

Thanks for that explanation. Is helpful.