Home » CSS

CSS - Apply Different Style (Color, Background Color) on Even and Odd Table Columns (td)

In this CSS Style Example we will learn how to apply different CSS Style on EVEN and ODD Table Columns and How to highlight Table Data (Cells) on Mouse Over (hover) Event.

CSS Code Snippet - Different Style for EVEN and ODD Rows Table Columns (Table CSS)

CSS

<style>
	.tableStyle1 {
		font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
		border-collapse: collapse;
		width: auto;
	}
	/*Style for Table Head - TH*/
	.tableStyle1 th {
		text-align: left;
		background-color: #006699;
		color: #fff;				
		text-align: left;
		padding: 25px;
	}
	/*TD and TH Style*/
	.tableStyle1 td, .tableStyle1 th {
		border: 1px solid #dedede; /*Border color*/
		padding: 15px;
	}
	/*Table Even Columns Styles*/
	.tableStyle1 td:nth-child(even){
		background-color: #afafaf;
	}
	/*Table ODD Columns Styles*/
	.tableStyle1 td:nth-child(odd){
		background-color: #cfcfcf;
	}			
	/*Table Column(Data) HOver Style*/
	.tableStyle1 td:hover{
		background-color: #e5423f;
	}
</style>

HTML Source Code with CSS

<!--CSS - Apply Different Style (Color, Background Color) on Even and Odd Table Columns (TD).-->
<html>
	<head>
		<title>CSS - Apply Different Style (Color, Background Color) on Even and Odd Table Columns (TD).</title>
		<!--Example CSS-->
		<link href="ExampleStyle.css" type="text/css" rel="stylesheet"/>
		<style>
			.tableStyle1 {
				font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
				border-collapse: collapse;
				width: auto;
			}
			/*Style for Table Head - TH*/
			.tableStyle1 th {
				text-align: left;
				background-color: #006699;
				color: #fff;				
				text-align: left;
				padding: 25px;
			}
			/*TD and TH Style*/
			.tableStyle1 td, .tableStyle1 th {
				border: 1px solid #dedede; /*Border color*/
				padding: 15px;
			}
			/*Table Even Columns Styles*/
			.tableStyle1 td:nth-child(even){
				background-color: #afafaf;
			}
			/*Table ODD Columns Styles*/
			.tableStyle1 td:nth-child(odd){
				background-color: #cfcfcf;
			}			
			/*Table Column(Data) HOver Style*/
			.tableStyle1 td:hover{
				background-color: #e5423f;
			}
		</style>
	</head>
	<body>
		<h1>CSS - Apply Different Style (Color, Background Color) on Even and Odd Table Columns (TD).</h1>
		<table class="tableStyle1">
			<tr>
				<th>Name</th>
				<th>Age</th>
				<th>Gender</th>
				<th>Country</th>
			</tr>
			<tr>
				<td>Mike</td>
				<td>23</td>
				<td>Male</td>
				<td>USA</td>
			</tr>
			<tr>
				<td>Mohit</td>
				<td>28</td>
				<td>Male</td>
				<td>India</td>
			</tr>		
			<tr>
				<td>James</td>
				<td>31</td>
				<td>Male</td>
				<td>Canada</td>
			</tr>			
			<tr>
				<td>Rossy</td>
				<td>32</td>
				<td>Female</td>
				<td>South Africa</td>
			</tr>			
		</table>
	</body>
</html>

Result

apply different color on even odd table columns




Comments and Discussions

Ad: Are you a blogger? Join our Blogging forum.



Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing » Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.