fixed header with scrollable body

by iulianmihu

HTML

<table cellspacing="0" cellpadding="0" class="scrollTable">
<thead class="fixedHeader">
	<tr class="alternateRow">
		<th>Header 1</th>
		<th>Header 2</th>
		<th>Header 3</th>
	</tr>
</thead>
<tbody class="scrollContent">
	<tr class="normalRow">
		<td>Cell Content 1</td>
		<td>Cell Content 2</td>
		<td>Cell Content 3</td>
	</tr>
	<tr class="alternateRow">
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr class="normalRow">
		<td>Even More Cell Content 1</td>
		<td>Even More Cell Content 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
	<tr class="alternateRow">
		<td>And Repeat 1</td>
		<td>And Repeat 2</td>
		<td>And Repeat 3</td>
	</tr>
	<tr class="normalRow">
		<td>Cell Content 1</td>
		<td>Cell Content 2</td>
		<td>Cell Content 3</td>
	</tr>
	<tr class="alternateRow">
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr class="normalRow">
		<td>Even More Cell Content 1</td>
		<td>Even More Cell Content 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
	<tr class="alternateRow">
		<td>And Repeat 1</td>
		<td>And Repeat 2</td>
		<td>And Repeat 3</td>
	</tr>
	<tr class="normalRow">
		<td>Cell Content 1</td>
		<td>Cell Content 2</td>
		<td>Cell Content 3</td>
	</tr>
	<tr class="alternateRow">
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr class="normalRow">
		<td>Even More Cell Content 1</td>
		<td>Even More Cell Content 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
	<tr class="alternateRow">
		<td>And Repeat 1</td>
		<td>And Repeat 2</td>
		<td>And Repeat 3</td>
	</tr>
	<tr class="normalRow">
		<td>Cell Content 1</td>
		<td>Cell Content 2</td>
		<td>Cell Content 3</td>
	</tr>
	<tr class="alternateRow">
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr class="normalRow">
		<td>Even More Cell Content 1</td>
		<td>Even More Cell Content...

CSS

table.scrollTable {
    border: 1px solid #963;
    width: 718px;
}
thead.fixedHeader{
     display: block;
}
thead.fixedHeader tr {
     height: 30px;
     background: #c96;
    
}

thead.fixedHeader tr th{
    border-right: 1px solid black;
}

tbody.scrollContent {
    display: block;
    height: 262px;
    overflow: auto;
}
tbody.scrollContent td{
    background: #eee;
    border-right: 1px solid black;
    height: 25px;
}

tbody.scrollContent tr.alternateRow td{
    background: #fff;
}
thead.fixedHeader th {
    width:233px;
}
thead.fixedHeader th:last-child{
  width: 250px;
}
 tbody.scrollContent td {
    width: 233px;
}