Solved

Trying to set the background and text color in a table

Posted on 2013-05-14
5
272 Views
Last Modified: 2013-05-15
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
Comment
Question by:isnoend2001
  • 2
  • 2
5 Comments
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
Comment Utility
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
 

Author Comment

by:isnoend2001
Comment Utility
: jagadishdulal,Thanks for adding that, but it made no difference
0
 
LVL 9

Accepted Solution

by:
Ishaan Rawat earned 500 total points
Comment Utility
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
 

Author Closing Comment

by:isnoend2001
Comment Utility
Thanks that works
0
 
LVL 9

Expert Comment

by:Ishaan Rawat
Comment Utility
Your Welcome. :D
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now