CODEWITHSUNDEEP
javascripthtmlcss
Voyager3
Voyager3

Reputation: 129

How to make a scrollable table with fixed header

I am trying to make a scrollable table with vertical and horizontal scroll bars and with fixed header.

But when i try to make the header in fixed position,my vertical scroll bar becomes hidden and appears only when i scroll extreme right.

similarly,if i make the scroll bars visible,my header becomes movable.

Please advise.

PFB my CSS code.

.button-container{
text-align: center;
}
table {
border-collapse: collapse; /* make simple 1px lines borders if border defined */
}
tr {
width: 100%;`}
.outer-container { 
position: absolute;
top:0;
left: 0;
right: 300px;
bottom:40px;


overflow: hidden;
}
.inner-container {
width: 100%;
height: 100%;
position: relative;

    overflow-y:hidden;
}
.header-table-container {

float:left;
width: 100%;
}

.header-table{
background: #0088CC;
width=100%;
cellpadding=0;
cellspacing=0;
}

.body-table-container {
float:left;
height: 100%;

}

.body-table{
width=100%;
cellpadding=0;
cellspacing=0;

height:500px;
}
.header-cell {
background-color: yellow;
text-align: left;
height: 40px;
}
.body-cell {
background-color: blue;
text-align: left;
}
.headerCol {
width: 160px;
min-width: 160px;
text-align: center;
}
.bodyCol {
width: 160px;
min-width: 160px;
}

.resultsCol {
width: 250px;
min-width: 250px;
}

.even {
background: lightgrey; 
}

.button-container{
text-align: center;
}

.results{
text-align: left;
}

#preprod-wrapper{

}

#prod-wrapper{
height:500px;
}

Upvotes: 1

Views: 703

Answers (3)

Claudio Bonfati
Claudio Bonfati

Reputation: 503

Its not too easy, but take a look here:

https://fiddle.jshell.net/805s75hb/

Many things were used here, such as position and overflow.

I hope it can help you. :)

Upvotes: 1

C1234
C1234

Reputation: 36

I have used two tables one for header to make it static so that it would fixed. Have a look if this can help you :) 

.wrap {
    width: 352px;
}

.wrap table {
    width: 300px;
    table-layout: fixed;
}

table tr td {
    padding: 5px;
    border: 1px solid #eee;
    width: 100px;
    word-wrap: break-word;
}

table.head tr td {
    background: #eee;
}

.inner_table {
    height: 100px;
    overflow-y: auto;

<!DOCTYPE html>
<html>
<head>

</head>
  <body>
<div class="wrap">
    <table class="head">
        <tr>
            <td>Head 1</td>
            <td>Head 1</td>
            <td>Head 1</td>

        </tr>
    </table>
    <div class="inner_table">
        <table>
        <tr>
            <td>Body 1</td>
            <td>Body 1</td>
            <td>Body 1</td>

        </tr>
          <tr>
            <td>Body 1</td>
            <td>Body 1</td>
            <td>Body 1</td>

        </tr>

         <tr>
            <td>Body 1</td>
            <td>Body 1</td>
            <td>Body 1</td>

        </tr>
        <!-- Some more tr's -->
    </table>
    </div>
</div>
    </body>
  </html>

Upvotes: 0

A_D
A_D

Reputation: 189

Have you tried this?

table {
border-collapse: collapse;
overflow :scroll;
}

Upvotes: 0

Related Questions