CSS: Freeze table header and first column, *but only on certain axes*

Question

Hello all,

I have a variation on a common question, and I'll try to explain it as best I can. It may take some visualization on your part. I have an HTML table (in reality there are tables within tables within divs within tables -- I'm using the JSGantt plugin). I'd like for the table header to be frozen only when I scroll down on the y-axis, but if I need to scroll right to see more data, I would like it to scroll right.

Meanwhile, as I scroll down (with the header row staying put), I'd like the first column of the table to scroll down with me. But when I scroll right, I want the first column to stay put (but as I mentioned above, the header row to scroll with me). So essentially I've frozen the first column only on the x-axis and the header row only on the y-axis.

I'll stop there for now. If anyone needs more clarification I can try to explain. I've tried this multiple ways, but I'm convinced that it may not be possible without some serious javascript. The table, by the way, is contained within an outer div with set dimensions, hence the need for me to scroll the data.

Any help you can provide would be greatly appeciated. Thanks very much.

Answer 1

This type of layout will help you on your way. Note there will be alot of formatting for the size of the cells to get them to match up

<div id="TableHeaderDiv">
    <table id="TableHeader">
        <thead>
            <tr>
                <th style="width:100px"> Column1 </th>
                <th style="width:100px"> Column2 </th>
                <th style="width:100px"> Column3 </th>
            </tr>
        <thead>
    </table>
</div>
<div id "TableBodyMainDiv" style="overflow-y:auto">
  <div id="TableBodyLeftDiv" style="float:left">
     <table id="TableBody">
        <tbody>
            <tr>
                        <td style="width:100px"> Column2Value </td>
                <td style="width:100px"> Column3Value </td>
            </tr>
            <!-- More rows here -->
        <tbody>
    </table>

  </div>
  <div id="TableBodyDiv" style="float:left; overflow-x: auto">
    <table id="TableBody">
        <tbody>
            <tr>
                        <td style="width:100px"> Column2Value </td>
                <td style="width:100px"> Column3Value </td>
            </tr>
            <!-- More rows here -->
        <tbody>
    </table>
  </div>
</div>

probably would want to style the width's of the tds using CSS classes or Javascript