Solved

Trying to set the background and text color in a table

Posted on 2013-05-14
5
276 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
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 9

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 9

Expert Comment

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

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Change color of modular 8 30
Centered Image 2 27
Create CSS Animation for Page Transitions 4 23
dashicon not showing on one website 13 18
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 …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

815 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

9 Experts available now in Live!

Get 1:1 Help Now