Solved

Trying to set the background and text color in a table

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

863 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

28 Experts available now in Live!

Get 1:1 Help Now