Table Header with fixed header without using div - html

Question

I want table header with fixed width without using div tag outside table. I need some solution in which i just need to change css file only. i have tried by putting table in side div with style:
width:100%;overflow-x:scroll
and on minimizing the browser's height and width, it is working fine.
But this is not what i want. I want to change in css style only, to avoid change in all the jsp files in my project
PSB my code:
CSS
h3 {
font: bold 1.2em Verdana, Helvetica, Arial, sans-serif;
background: #B7BBD6;
padding: 5px;
margin: 10px 0 0 0;
clear: both;
}
.list {
float: left;
width: 100%;
color: #000099;
border: 1px solid #DEDFDE;
margin: 0 0 15px 0;
overflow-x: scroll
}
.list th, .list td {
vertical-align: top;
border: 1px solid #B7BBD6
}
.even {
background: #F1F1F1
}
/*.odd {background: #F1F1F1}*/
.odd {
background: #FFF
}
HTML
<h3>Test Table</h3>
<table class="list">
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
<th>f</th>
<th>g</th>
<th>h</th>
<th>i</th>
</tr>
<tr class="odd">
<td>98052826</a></td>
<td>Company</td>
<td>asdfsafdsa</td>
<td>asdfsadf</td>
<td>asdfsafs</td>
<td>sadfsaf</td>
<td>1234</td>
<td>asfsdf</td>
<td>asfsafdf</td>
</tr>
<tr class="even">
<td>234568992</a></td>
<td>Private</td>
<td>asfsdfaf</td>
<td>asfsaf</td>
<td>safsdafsdf</td>
<td>Some address</td>
<td>3344</td>
<td>&safsdafsda</td>
<td>sadfsaddfdaf</td>
</tr>
<table>
Please suggest??

Answer 1

Set the following to your css stylesheet:
table{width: 100%;table-layout: fixed;}
Edit
If you could use jQuery, its easy:
$(document).ready(function(){
/*define table class then place your class here instead of 'table'*/
var tablewidth = $('table').width();
/*define h3 class then place your class here instead of 'h3'*/
$('h3').css('width',tablewidth - 10);
});
demo

Answer 2

h3{
position:fixed;
width:100%
}
table{
top:60px;
position:relative;
}
demo