Sticky Header CSS

by paul724

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>List</title>
	<link href="../style_scroll.css" rel="stylesheet" type="text/css">
</head>
<body> 

<table>
    <thead>
		<tr>
			<th class="th-right w-200" >Fruit</th>
			<th class="td-left w-100" >Colour</th>
			<th class="td-left w-100" >Status</th>
			<th class="th-right w-200" >Number
			<span class="up" text-align="right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; back to top &uarr;<span>
			</th>
		</tr>
    </thead>
<tbody>
		<tr>
			<td class="td-right">Apple</td>
			<td class="td-left">Green</td>
			<td class="td-left">Ripe</td>
			<td class="td-right">20</td>
		</tr>
		<tr>
			<td class="td-right">Apple</td>
			<td class="td-left">Green</td>
			<td class="td-left">Ripe</td>
			<td class="td-right">20</td>
		</tr>
				<tr>
			<td class="td-right">Apple</td>
			<td class="td-left">Green</td>
			<td class="td-left">Ripe</td>
			<td class="td-right">20</td>
		</tr>
		 <tr>
			<td class="td-right">Apple</td>
			<td class="td-left">Green</td>
			<td class="td-left">Ripe</td>
			<td class="td-right">20</td>
		</tr>
		<tr>
			<td class="td-right">Apple</td>
			<td class="td-left">Green</td>
			<td class="td-left">Ripe</td>
			<td class="td-right">20</td>
		</tr>
		<tr>
			<td class="td-right">Apple</td>
			<td class="td-left">Green</td>
			<td class="td-left">Ripe</td>
			<td class="td-right">20</td>
		</tr>
				<tr>
			<td class="td-right">Apple</td>
			<td class="td-left">Green</td>
			<td class="td-left">Ripe</td>
			<td class="td-right">20</td>
		</tr>
		 <tr>
			<td class="td-right">Apple</td>
			<td class="td-left">Green</td>
			<td class="td-left">Ripe</td>
			<td class="td-right">20</td>
		</tr>
		<tr>
			<td class="td-right">Apple</td>
			<td class="td-left">Green</td>
			<td class="td-left">Ripe</td>
			<td...

CSS

@charset "utf-8";

table {
 
	}
	
th{
		position: sticky;
		top:0;
		position: -webkit-sticky;
	}
	
tfoot{
	   position: sticky;
	   bottom:0;
	   color: blue;
	   position: -webkit-sticky;
   }

.footer{
		position: sticky;
		bottom:0;
}

thead, tbody, tr, td, th { 
		border: 1px solid #ddd; 
	}

tbody td, thead th {
		width: 100px;
	}

tbody {
		height: 700px;
		overflow-y: auto;
	}

thead th {
		height: 30px;
		color:white;
		background:#3b3b3b;
	}
	
tbody tr:nth-child(even){
	  	background: #ebebeb;
	}

tbody tr:nth-child(odd){
	  	background:#f8f8f8;
	}

tbody tr:hover{
	  	background:#BDC3C7; /*#efefef; #ECF1ED;/*#BDC3C7;/*#BDC3C7;#484B4C;
	  color:#FFFFFF;*/
	}

.th-right, .td-right {
	  text-align:right;
	  padding-right:10px;
	}

.th-left, .td-left {
	  text-align:left;
	  padding-left:10px;
	}
	
.w-100 {
		width: 100px;
	}

.w-200 {
		width: 200px;
	}
	
/*.up{
	cursor:pointer;
	}