CODEWITHSUNDEEP
csshtml-tableposition
DSblizzard
DSblizzard

Reputation: 4149

How to make fixed header in table with help of div?

HTML:

<thead>
<tr>
    <th><div style="width:36px"><textarea class="cell"></textarea></div></th>
    <th><div style="width:36px"><textarea class="cell"></textarea></div></th>
</tr>
<div class="header">
    <tr>
        <th><div style="width:36px"><textarea class="cell">Name 1</textarea></div></th>
        <th><div style="width:36px"><textarea class="cell">Name 2</textarea></div></th>
    </tr>
</div>
</thead>

CSS:

div.header {
    position: absolute;
}

JS:

$(window).scroll(function() {
    $('div.header').css({
        'top': $(this).scrollTop()
    });
});

I want to leave in place first fake header row to apply column widths to the table and move other rows when scrolling, but they don't move. What I need to change?

Upvotes: 0

Views: 1315

Answers (2)

rpasianotto
rpasianotto

Reputation: 1413

DEMO

Is that solution possible?

<thead>
<tr>
    <th><div style="width:36px"><textarea class="cell"></textarea></div></th>
    <th><div style="width:36px"><textarea class="cell"></textarea></div></th>
</tr>
<div class="header">
    <tr>
        <th><div class="horizontal"><textarea class="cell">Name 1</textarea></div></th>
        <th><div class="horizontal"><textarea class="cell">Name 2</textarea></div></th>
    </tr>
</div>
</thead>

CSS

.horizontal {
display:inline-block;
margin-right:20px;
width:150px;
}
.header{
height:35px;
width:165px;
overflow-x:scroll;
overflow-y:scroll;
}

Upvotes: 0

dougmays
dougmays

Reputation: 96

Instead of using the div you can give you tbody a fixed height and overflow:auto. This will allow the body of the table to scroll

Upvotes: 2

Related Questions