Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 282
  • Last Modified:

Trying to set the background and text color in a table

http://roofgenius.com/tablepractise.asp
I have been trying to set the background color to blue and the text bold white in the top 2 rows in this table.
What am i doing doing wrong ?
0
isnoend2001
Asked:
isnoend2001
  • 2
  • 2
1 Solution
 
Jagadishwor DulalBraces MediaCommented:
Why not change the header columns to th see here:

<table class="comptable">
<tbody><tr><th>
</th><th style="margin-top:30px; text-align:center" rowspan="2" class="bluerow">
Composition Shingles
</th>
<th colspan="4" class="rightcolumn">
Sheathing Thickness
</th>
</tr>
<tr>
<th class="rightcolumn">3/8"</th>
<th class="rightcolumn">1/2"</th>
<th class="rightcolumn">5/8"</th>
<th class="rightcolumn">3/4"</th>
</tr>
<tr>
<td class="leftcolumn">
<span style="padding-left:5px">
3-Tab comp shingles (Bare sheathing)</span></td>
<td class="rightcolumn">1"</td>
<td class="rightcolumn">1"</td>
<td class="rightcolumn">1"</td>
<td class="rightcolumn">1"</td>
</tr>
<tr>
<td class="leftcolumn">
<span style="padding-left:5px">
Dimensional comp shingles (Bare sheathing)
</span>
</td>

<td class="rightcolumn">1"</td>
<td class="rightcolumn">1-1/4"</td>
<td class="rightcolumn">1-1/4"</td>
<td class="rightcolumn">1-1/4"</td>
</tr>
<tr>
<td class="leftcolumn">
<span style="padding-left:5px">
3-Tab comp shingles over 3 Tab comp shingles</span></td>
<td class="rightcolumn">1"</td>
<td class="rightcolumn">1-1/4"</td>
<td class="rightcolumn">1-1/4"</td>
<td class="rightcolumn">1-1/4"</td>
</tr>
<tr>
<td class="leftcolumn">
<span style="padding-left:5px">
Dimensional comp shingles over 3 Tab</span></td>
<td class="rightcolumn">1-1/4"</td>
<td class="rightcolumn">1-1/2"</td>
<td class="rightcolumn">1-1/2"</td>
<td class="rightcolumn">1-1/2"</td> 
</tr>
</tbody></table>

Open in new window


Now Your CSS:
	    
	 .comptable .rightcolumn{
	 width: 45px;
	 text-align: center !important;
	  }  
	  
	 .comptable tr th{
	 width: 345px;
	 text-align:center;
	 margin-left:40px;
	  } 	
	
	.comptable {
	width:480px; 
    margin:auto;
    font-size:11px;
    border:1px solid #0066ff; /* ~dark blue */
     border-collapse:collapse;	
	}	

	.comptable .firstrow td {
	 border-right: 1px solid #CCC;/*darker gray */
      border-left: 1px solid #CCC;
      border-bottom: 1px solid #CCC;
	  }
		  
	 .comptable .bluerow td{
	  background-color:#0066ff; /*dark blue */ 
	  }	   
	 

Open in new window

0
 
isnoend2001Author Commented:
: jagadishdulal,Thanks for adding that, but it made no difference
0
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
try this...

add a class of
.head

Open in new window

in the first two TR... like this..
<tr class="head">...</tr>

Open in new window


then add this to your stylesheet..

.head{
background: blue;
font-weight: bold;
color: #FFF;
}

Open in new window

0
 
isnoend2001Author Commented:
Thanks that works
0
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
Your Welcome. :D
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now