Vaidas Vaidas - 11 days ago 5
CSS Question

Table thead and first tbody column stays fixed in scrollable div

I'm trying to make

fixed
table
fields in scrollable
div
.

HTML part:

<div class="scroll">
<table>
<thead>
<tr>
<td>Title #1</td>
<td class="second">Title #2</td>
</tr>
</thead>

<tbody>
<tr>
<td>Name #1</td>
<td>Description</td>
</tr>
<tr>
<td>Name #2</td>
<td>Description</td>
</tr>
</tbody>
</table>
</div>


CSS part:

table {

width: auto;
}

table > thead > tr > td {

min-width: 100px;
max-width: 100px;

padding: 10px 20px;
border-right: 1px solid #666666;
background-color: #cccccc;
}

table > thead > tr > td.second {

min-width: 300px;
max-width: 300px;
}

table > tbody > tr > td {

padding: 30px 0;
}

div.scroll {

max-width: 400px;
max-height: 200px;
overflow: auto;
}


Where
div.scroll
have
max-height
and
max-width
set to lower sizes than
table
. Please see fiddle example.

Live example:
example

Red part should stay at
top
when scrolling vertically, but should move when scrolling horizontally, and blue part should move when scrolling vertically, but should stay at
left
when scrolling horizontally.

Question:

Is there any easy way of doing this? Or what is best way of doing this..?

Answer

jQuery solution for my problem: STICKY TABLE HEADERS & COLUMNS.