I would like to show a scrollable table with fixed header as grid bag layout.
So I created an outer container, one row for the header and a second row for the data.
The problem is that the inner container which was intended to be used for scrollbar ignored boundaries of out container.
#maincontainer {
height:500px;
background-color:lightgrey;
}
#innercontainer {
height:100%;
overflow-y: auto;
}
#headerrow {
background-color:grey;
height:200px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<html>
<body>
<div class="container" id="maincontainer">
<div class="row" id="headerrow">
<div class="col-xs-4">Col 1</div>
<div class="col-xs-4">Col 2</div>
<div class="col-xs-4">Col 3</div>
</div>
<div class="row" id="listrow">
<div class="container" id="innercontainer">
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
<div class="row">
<div class="col-xs-4">data 1</div>
<div class="col-xs-4">data 2</div>
<div class="col-xs-4">data 3</div>
</div>
</div>
</div>
</div>
</body>
</html>In that snippet the light grey container is the outer container with the size for the complete list.
The dark grey is the header. and the data below should fit into the light grey box and show a scrollbar on the right side.
Any help is appreciated.
You have set the height of #innercontainer to 100% but not set it relative to anything so it will adopt the the height of body in this case. Something like this should get you on the way:
#maincontainer {
position:relative;
height:500px;
background-color:lightgrey;
}
#innercontainer {
height:100%;
overflow: scroll;
overflow-x: hidden;
}
#listrow {
positon: relative;
height: calc(100% - 50px);
}
#headerrow {
background-color:grey;
height:50px;
}
As a sidenote, bootstrap comes with some good table styling which I think is a good usecase for what you are trying to create.