Hi,

I have bought a lot of javascript books from SitePoint but none of them had any code example to achieve what I am looking for.

I do not even know if this is something possible to achieve using javascript, CSS, DIV, ..etc and I would be truly grateful is someone could help me to transform a TABLE into a GRID so that users could scroll the TBODY section vertically and horizontally.

When users scrolled horizontally then the TBODY together with the THEAD would scroll under the left section (which I call Row Headings - currently using TH). When they scrolled vertically then the TBODY would go under the THEAD.

I don't even know how to start it and would appreciate some help with the code if possible.

Cheers

P

This is the table:

<html>
<head>
<title>Table</title>
<script type="text/javascript" language="javascript">
function makeGrid()
{
var t = document.getElementById("grid")
var th = document.getElementById("gridHead")
var tb = document.getElementById("gridBdy")

alert(th.outerHTML + "\n ==================== \n" + tb.outerHTML)
}

</script>
</head>
<body onload="makeGrid()">
<table border="1" id="grid">
<thead id="gridHead">
<tr>
<th rowspan="5" colspan="3"> </th>
<th colspan="6">Month</th>
<th colspan="2"> </th>
</tr>
<tr>
<th colspan="2">2006</th>
<th colspan="4">2007</th>
<th colspan="2"> </th>
</tr>
<tr>
<th colspan="2">Quarter 4</th>
<th colspan="4">Quarter 1</th>
<th colspan="2"> </th>
</tr>
<tr>
<th colspan="2">December</th>
<th colspan="2">January</th>
<th colspan="2">February</th>
<th colspan="2">Total</th>
</tr>
<tr>
<th>Total Pages</th>
<th>Cost</th>
<th>Total Pages</th>
<th>Cost</th>
<th>Total Pages</th>
<th>Cost</th>
<th>Total Pages</th>
<th>Cost</th>
</tr>
</thead>
<tbody id="gridBdy">
<tr>
<th rowspan="3">Full Name</th>
<th rowspan="3">Name 1</th>
<th>A</th>
<td>1</td>
<td>5385</td>
<td>1</td>
<td>4471</td>
<td> </td>
<td> </td>
<td>2</td>
<td>9856</td>
</tr>
<tr>
<th>B</th>
<td>1</td>
<td>4914</td>
<td> </td>
<td> </td>
<td>1</td>
<td>5107</td>
<td>2</td>
<td>10021</td>
</tr>
<tr>
<th>C</th>
<td>0.8</td>
<td>6604</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>0.8</td>
<td>6604</td>
</tr>
<tr>
<th rowspan="1"> </th>
<th rowspan="1"> </th>
<th>Total</th>
<td>2.8</td>
<td>16903</td>
<td>1</td>
<td>4471</td>
<td>1</td>
<td>5107</td>
<td>4.8</td>
<td>26481</td>
</tr>
</tbody>
</table>
</body>
</html>