Solved

Trying to set the background and text color in a table

Posted on 2013-05-14
5
279 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39167040
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
ID: 39167069
: jagadishdulal,Thanks for adding that, but it made no difference
0
 
LVL 10

Accepted Solution

by:
Ishaan Rawat earned 500 total points
ID: 39167273
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
ID: 39167991
Thanks that works
0
 
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 39168111
Your Welcome. :D
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

729 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