Blog from Saravanan Arumugam

Let us talk about Technologies

Category Archives: Html, CSS

Color alternate rows with different color


Most of us prefer to show a table element with alternate rows showing different background colors.

There has been multiple solutions in the history to do that.

One old way is to apply alternate classes to rows and apply different styles to them. Then ASP.Net form’s grids had property settings for achieving that. There’s a javascript way etc.

I am posting here two simpler and newer ways to do it.

 

Using CSS3

With CSS 3 doing this is way simple.

tr:nth-child(odd)
{
    background-color: #eee;
}

Simple isn’t it.

 

For the older browsers like IE8, IE7 etc. this may not work. For them, we can use jQuery to do it.

$(“tr:odd”).css(“background-color”, “#eee”);

The code above can do the trick for us.

Replacement to Fieldset to avoid alignment issues


I tried to use multiple fieldsets and encountered a lot of alignment issues. I did a lot of changes in the CSS to fix it. I could only minimize the issues but couldn’t avoid it completely.

So I have come up with a replacement of Fieldset using Div and Span (of course I got the idea from StackOverflow, and I modified it according to my need).

I embedded my content in the following elements

<div class="fieldset">
    <span class="legend">Project Manager</span>
    <p> My Content
    </p>
</div>

In the css file I added the following styles.

.fieldset 
{
	border: 1px solid #ddd;
	margin-top: 1em;		
	padding-left: 15px;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;	
}
 
.fieldset span.legend
{
    color: #222;
    font-size: 1em;
	text-align: left;
	display: inline;
	background: #fff; padding: 5px 10px; 
	position: relative; 
	top: -.8em;	
}

 

This was a lot stable in alignment when compared to Fieldset. With this I am not complaining the Fieldset, its a lot neater way to group things. But I couldn’t figure out the fix to the alignment issues. So this one is a temporary replacement to the fieldset.