This has a fixed-height header and fixed-height footer which remain in fixed. Right now, the middle part (which has a left-column and right-column), scrolls vertically. But I would like
- for the region containing right-column and left-column not to scroll together as a unit
- for right-column to scroll independently
- for the header of the table inside left-column to stay fixed, and
- for the rows below the header on that table in left-column to vertically scroll.
I’ve tried various suggestions but never seem to get closer to solving this. This particular variation reflects one pathway through the big maze.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<style>
body {
height: 100%;
margin: 0;
padding: 0;
}
header {
height: 100px;
background-color: lightgray;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.wrapper {
display: flex;
height: calc(100% - 175px);
margin-top: 100px;
margin-bottom: 75px;
overflow-x: auto;
overflow-y: hidden;
}
.left-column {
width: 50%;
height: 100%;
flex: 1;
position: relative;
}
.left-column table,
th,
td {
width: 100%;
border: 1px solid;
}
.left-column thead th {
position: sticky;
top: 0;
background-color: white;
z-index: 1;
}
.right-column {
width: 50%;
height: 100%;
overflow-y: scroll;
flex: 1;
}
.left-column,
.right-column {
overflow-x: hidden;
}
footer {
height: 75px;
background-color: lightgray;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<header>Header</header>
<div class="wrapper">
<div class="left-column">
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<!-- Imagine n rows below the header which need to be vertically scrolled -->
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
<td>Row 1, Column 4</td>
<td>Row 1, Column 5</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
<td>Row 2, Column 4</td>
<td>Row 2, Column 5</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
<td>Row 3, Column 3</td>
<td>Row 3, Column 4</td>
<td>Row 3, Column 5</td>
</tr>
<tr>
<td>Row 4, Column 1</td>
<td>Row 4, Column 2</td>
<td>Row 4, Column 3</td>
<td>Row 4, Column 4</td>
<td>Row 4, Column 5</td>
</tr>
<tr>
<td>Row 5, Column 1</td>
<td>Row 5, Column 2</td>
<td>Row 5, Column 3</td>
<td>Row 5, Column 4</td>
<td>Row 5, Column 5</td>
</tr>
<tr>
<td>Row 6, Column 1</td>
<td>Row 6, Column 2</td>
<td>Row 6, Column 3</td>
<td>Row 6, Column 4</td>
<td>Row 6, Column 5</td>
</tr>
<tr>
<td>Row 7, Column 1</td>
<td>Row 7, Column 2</td>
<td>Row 7, Column 3</td>
<td>Row 7, Column 4</td>
<td>Row 7, Column 5</td>
</tr>
<tr>
<td>Row 8, Column 1</td>
<td>Row 8, Column 2</td>
<td>Row 8, Column 3</td>
<td>Row 8, Column 4</td>
<td>Row 8, Column 5</td>
</tr>
<tr>
<td>Row 9, Column 1</td>
<td>Row 9, Column 2</td>
<td>Row 9, Column 3</td>
<td>Row 9, Column 4</td>
<td>Row 9, Column 5</td>
</tr>
<tr>
<td>Row 10, Column 1</td>
<td>Row 10, Column 2</td>
<td>Row 10, Column 3</td>
<td>Row 10, Column 4</td>
<td>Row 10, Column 5</td>
</tr>
<tr>
<td>Row 11, Column 1</td>
<td>Row 11, Column 2</td>
<td>Row 11, Column 3</td>
<td>Row 11, Column 4</td>
<td>Row 11, Column 5</td>
</tr>
<tr>
<td>Row 12, Column 1</td>
<td>Row 12, Column 2</td>
<td>Row 12, Column 3</td>
<td>Row 12, Column 4</td>
<td>Row 12, Column 5</td>
</tr>
<tr>
<td>Row 13, Column 1</td>
<td>Row 13, Column 2</td>
<td>Row 13, Column 3</td>
<td>Row 13, Column 4</td>
<td>Row 13, Column 5</td>
</tr>
<tr>
<td>Row 14, Column 1</td>
<td>Row 14, Column 2</td>
<td>Row 14, Column 3</td>
<td>Row 14, Column 4</td>
<td>Row 14, Column 5</td>
</tr>
<tr>
<td>Row 15, Column 1</td>
<td>Row 15, Column 2</td>
<td>Row 15, Column 3</td>
<td>Row 15, Column 4</td>
<td>Row 15, Column 5</td>
</tr>
<tr>
<td>Row 16, Column 1</td>
<td>Row 16, Column 2</td>
<td>Row 16, Column 3</td>
<td>Row 16, Column 4</td>
<td>Row 16, Column 5</td>
</tr>
<tr>
<td>Row 17, Column 1</td>
<td>Row 17, Column 2</td>
<td>Row 17, Column 3</td>
<td>Row 17, Column 4</td>
<td>Row 17, Column 5</td>
</tr>
<tr>
<td>Row 18, Column 1</td>
<td>Row 18, Column 2</td>
<td>Row 18, Column 3</td>
<td>Row 18, Column 4</td>
<td>Row 18, Column 5</td>
</tr>
<tr>
<td>Row 19, Column 1</td>
<td>Row 19, Column 2</td>
<td>Row 19, Column 3</td>
<td>Row 19, Column 4</td>
<td>Row 19, Column 5</td>
</tr>
<tr>
<td>Row 20, Column 1</td>
<td>Row 20, Column 2</td>
<td>Row 20, Column 3</td>
<td>Row 20, Column 4</td>
<td>Row 20, Column 5</td>
</tr>
<tr>
<td>Row 21, Column 1</td>
<td>Row 21, Column 2</td>
<td>Row 21, Column 3</td>
<td>Row 21, Column 4</td>
<td>Row 21, Column 5</td>
</tr>
<tr>
<td>Row 22, Column 1</td>
<td>Row 22, Column 2</td>
<td>Row 22, Column 3</td>
<td>Row 22, Column 4</td>
<td>Row 22, Column 5</td>
</tr>
<tr>
<td>Row 23, Column 1</td>
<td>Row 23, Column 2</td>
<td>Row 23, Column 3</td>
<td>Row 23, Column 4</td>
<td>Row 23, Column 5</td>
</tr>
<tr>
<td>Row 24, Column 1</td>
<td>Row 24, Column 2</td>
<td>Row 24, Column 3</td>
<td>Row 24, Column 4</td>
<td>Row 24, Column 5</td>
</tr>
<tr>
<td>Row 25, Column 1</td>
<td>Row 25, Column 2</td>
<td>Row 25, Column 3</td>
<td>Row 25, Column 4</td>
<td>Row 25, Column 5</td>
</tr>
<tr>
<td>Row 26, Column 1</td>
<td>Row 26, Column 2</td>
<td>Row 26, Column 3</td>
<td>Row 26, Column 4</td>
<td>Row 26, Column 5</td>
</tr>
<tr>
<td>Row 27, Column 1</td>
<td>Row 27, Column 2</td>
<td>Row 27, Column 3</td>
<td>Row 27, Column 4</td>
<td>Row 27, Column 5</td>
</tr>
<tr>
<td>Row 28, Column 1</td>
<td>Row 28, Column 2</td>
<td>Row 28, Column 3</td>
<td>Row 28, Column 4</td>
<td>Row 28, Column 5</td>
</tr>
<tr>
<td>Row 29, Column 1</td>
<td>Row 29, Column 2</td>
<td>Row 29, Column 3</td>
<td>Row 29, Column 4</td>
<td>Row 29, Column 5</td>
</tr>
<tr>
<td>Row 30, Column 1</td>
<td>Row 30, Column 2</td>
<td>Row 30, Column 3</td>
<td>Row 30, Column 4</td>
<td>Row 30, Column 5</td>
</tr>
<tr>
<td>Row 31, Column 1</td>
<td>Row 31, Column 2</td>
<td>Row 31, Column 3</td>
<td>Row 31, Column 4</td>
<td>Row 31, Column 5</td>
</tr>
<tr>
<td>Row 32, Column 1</td>
<td>Row 32, Column 2</td>
<td>Row 32, Column 3</td>
<td>Row 32, Column 4</td>
<td>Row 32, Column 5</td>
</tr>
<tr>
<td>Row 33, Column 1</td>
<td>Row 33, Column 2</td>
<td>Row 33, Column 3</td>
<td>Row 33, Column 4</td>
<td>Row 33, Column 5</td>
</tr>
<tr>
<td>Row 34, Column 1</td>
<td>Row 34, Column 2</td>
<td>Row 34, Column 3</td>
<td>Row 34, Column 4</td>
<td>Row 34, Column 5</td>
</tr>
<tr>
<td>Row 35, Column 1</td>
<td>Row 35, Column 2</td>
<td>Row 35, Column 3</td>
<td>Row 35, Column 4</td>
<td>Row 35, Column 5</td>
</tr>
<!-- End repeated rows -->
</tbody>
</table>
</div>
<div class="right-column">
<!-- Imagine n lines of stuff here, that may or may not need to be scrolled -->
<h1>Example Header 1.</h1>
<h2>Example Header 2.</h2>
<h3>Example Header 3, Number 1</h3>
<h3>Example Header 3, Number 2.</h3>
<h3>Example Header 3, Number 3.</h3>
<h3>Example Header 3, Number 4.</h3>
<h3>Example Header 3, Number 5.</h3>
<h3>Example Header 3, Number 6.</h3>
<h3>Example Header 3, Number 7.</h3>
<h3>Example Header 3, Number 8.</h3>
<h3>Example Header 3, Number 9.</h3>
<h3>Example Header 3, Number 10.</h3>
<h3>Example Header 3, Number 11.</h3>
<h3>Example Header 3, Number 12.</h3>
<h3>Example Header 3, Number 13.</h3>
<h3>Example Header 3, Number 14.</h3>
<h3>Example Header 3, Number 15.</h3>
<h3>Example Header 3, Number 16.</h3>
<h3>Example Header 3, Number 17.</h3>
<h3>Example Header 3, Number 18.</h3>
<h3>Example Header 3, Number 19.</h3>
<h3>Example Header 3, Number 20.</h3>
</div>
</div>
<footer>Footer</footer>
</body>
</html>
I have experimented with different settings including changing overflow-x and overflow-y, setting overflow to hidden or scroll in left-column, right-column and wrapper; I’ve tried float and flex properties in the columns as well.
These have been shots in the dark. The ultimate way to set up this mechanism is far from obvious.
>Solution :
Here is the Updated Code 🙂
< !DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<style>
body {
height: 100%;
margin: 0;
padding: 0;
}
header {
height: 100px;
background-color: lightgray;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.wrapper {
display: flex;
margin-top: 100px;
margin-bottom: 75px;
overflow-x: auto;
overflow-y: hidden;
}
.left-column,
.right-column {
width: 50%;
flex: 1;
position: relative;
overflow-y: auto;
height: calc(100vh - 175px);
/* set a fixed height for the left column */
}
.left-column table,
th,
td {
width: 100%;
border: 1px solid;
}
.left-column thead th {
position: sticky;
top: 0;
background-color: white;
z-index: 1;
}
.right-column {
width: 50%;
overflow-y: auto;
flex: 1;
position: sticky;
top: 0;
}
footer {
height: 75px;
background-color: lightgray;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<header>Header</header>
<div class="wrapper">
<div class="left-column">
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody style="position: relative;">
< !-- Imagine n rows below the header which need to be vertically scrolled -->
<tr>
<td>Row 1,
Column 1
</td>
<td>Row 1,
Column 2
</td>
<td>Row 1,
Column 3
</td>
<td>Row 1,
Column 4
</td>
<td>Row 1,
Column 5
</td>
</tr>
<tr>
<td>Row 2,
Column 1
</td>
<td>Row 2,
Column 2
</td>
<td>Row 2,
Column 3
</td>
<td>Row 2,
Column 4
</td>
<td>Row 2,
Column 5
</td>
</tr>
<tr>
<td>Row 3,
Column 1
</td>
<td>Row 3,
Column 2
</td>
<td>Row 3,
Column 3
</td>
<td>Row 3,
Column 4
</td>
<td>Row 3,
Column 5
</td>
</tr>
<tr>
<td>Row 4,
Column 1
</td>
<td>Row 4,
Column 2
</td>
<td>Row 4,
Column 3
</td>
<td>Row 4,
Column 4
</td>
<td>Row 4,
Column 5
</td>
</tr>
<tr>
<td>Row 5,
Column 1
</td>
<td>Row 5,
Column 2
</td>
<td>Row 5,
Column 3
</td>
<td>Row 5,
Column 4
</td>
<td>Row 5,
Column 5
</td>
</tr>
<tr>
<td>Row 6,
Column 1
</td>
<td>Row 6,
Column 2
</td>
<td>Row 6,
Column 3
</td>
<td>Row 6,
Column 4
</td>
<td>Row 6,
Column 5
</td>
</tr>
<tr>
<td>Row 7,
Column 1
</td>
<td>Row 7,
Column 2
</td>
<td>Row 7,
Column 3
</td>
<td>Row 7,
Column 4
</td>
<td>Row 7,
Column 5
</td>
</tr>
<tr>
<td>Row 8,
Column 1
</td>
<td>Row 8,
Column 2
</td>
<td>Row 8,
Column 3
</td>
<td>Row 8,
Column 4
</td>
<td>Row 8,
Column 5
</td>
</tr>
<tr>
<td>Row 9,
Column 1
</td>
<td>Row 9,
Column 2
</td>
<td>Row 9,
Column 3
</td>
<td>Row 9,
Column 4
</td>
<td>Row 9,
Column 5
</td>
</tr>
<tr>
<td>Row 10,
Column 1
</td>
<td>Row 10,
Column 2
</td>
<td>Row 10,
Column 3
</td>
<td>Row 10,
Column 4
</td>
<td>Row 10,
Column 5
</td>
</tr>
<tr>
<td>Row 11,
Column 1
</td>
<td>Row 11,
Column 2
</td>
<td>Row 11,
Column 3
</td>
<td>Row 11,
Column 4
</td>
<td>Row 11,
Column 5
</td>
</tr>
<tr>
<td>Row 12,
Column 1
</td>
<td>Row 12,
Column 2
</td>
<td>Row 12,
Column 3
</td>
<td>Row 12,
Column 4
</td>
<td>Row 12,
Column 5
</td>
</tr>
<tr>
<td>Row 13,
Column 1
</td>
<td>Row 13,
Column 2
</td>
<td>Row 13,
Column 3
</td>
<td>Row 13,
Column 4
</td>
<td>Row 13,
Column 5
</td>
</tr>
<tr>
<td>Row 14,
Column 1
</td>
<td>Row 14,
Column 2
</td>
<td>Row 14,
Column 3
</td>
<td>Row 14,
Column 4
</td>
<td>Row 14,
Column 5
</td>
</tr>
<tr>
<td>Row 15,
Column 1
</td>
<td>Row 15,
Column 2
</td>
<td>Row 15,
Column 3
</td>
<td>Row 15,
Column 4
</td>
<td>Row 15,
Column 5
</td>
</tr>
<tr>
<td>Row 16,
Column 1
</td>
<td>Row 16,
Column 2
</td>
<td>Row 16,
Column 3
</td>
<td>Row 16,
Column 4
</td>
<td>Row 16,
Column 5
</td>
</tr>
<tr>
<td>Row 17,
Column 1
</td>
<td>Row 17,
Column 2
</td>
<td>Row 17,
Column 3
</td>
<td>Row 17,
Column 4
</td>
<td>Row 17,
Column 5
</td>
</tr>
<tr>
<td>Row 18,
Column 1
</td>
<td>Row 18,
Column 2
</td>
<td>Row 18,
Column 3
</td>
<td>Row 18,
Column 4
</td>
<td>Row 18,
Column 5
</td>
</tr>
<tr>
<td>Row 19,
Column 1
</td>
<td>Row 19,
Column 2
</td>
<td>Row 19,
Column 3
</td>
<td>Row 19,
Column 4
</td>
<td>Row 19,
Column 5
</td>
</tr>
<tr>
<td>Row 20,
Column 1
</td>
<td>Row 20,
Column 2
</td>
<td>Row 20,
Column 3
</td>
<td>Row 20,
Column 4
</td>
<td>Row 20,
Column 5
</td>
</tr>
<tr>
<td>Row 21,
Column 1
</td>
<td>Row 21,
Column 2
</td>
<td>Row 21,
Column 3
</td>
<td>Row 21,
Column 4
</td>
<td>Row 21,
Column 5
</td>
</tr>
<tr>
<td>Row 22,
Column 1
</td>
<td>Row 22,
Column 2
</td>
<td>Row 22,
Column 3
</td>
<td>Row 22,
Column 4
</td>
<td>Row 22,
Column 5
</td>
</tr>
<tr>
<td>Row 23,
Column 1
</td>
<td>Row 23,
Column 2
</td>
<td>Row 23,
Column 3
</td>
<td>Row 23,
Column 4
</td>
<td>Row 23,
Column 5
</td>
</tr>
<tr>
<td>Row 24,
Column 1
</td>
<td>Row 24,
Column 2
</td>
<td>Row 24,
Column 3
</td>
<td>Row 24,
Column 4
</td>
<td>Row 24,
Column 5
</td>
</tr>
<tr>
<td>Row 25,
Column 1
</td>
<td>Row 25,
Column 2
</td>
<td>Row 25,
Column 3
</td>
<td>Row 25,
Column 4
</td>
<td>Row 25,
Column 5
</td>
</tr>
<tr>
<td>Row 26,
Column 1
</td>
<td>Row 26,
Column 2
</td>
<td>Row 26,
Column 3
</td>
<td>Row 26,
Column 4
</td>
<td>Row 26,
Column 5
</td>
</tr>
<tr>
<td>Row 27,
Column 1
</td>
<td>Row 27,
Column 2
</td>
<td>Row 27,
Column 3
</td>
<td>Row 27,
Column 4
</td>
<td>Row 27,
Column 5
</td>
</tr>
<tr>
<td>Row 28,
Column 1
</td>
<td>Row 28,
Column 2
</td>
<td>Row 28,
Column 3
</td>
<td>Row 28,
Column 4
</td>
<td>Row 28,
Column 5
</td>
</tr>
<tr>
<td>Row 29,
Column 1
</td>
<td>Row 29,
Column 2
</td>
<td>Row 29,
Column 3
</td>
<td>Row 29,
Column 4
</td>
<td>Row 29,
Column 5
</td>
</tr>
<tr>
<td>Row 30,
Column 1
</td>
<td>Row 30,
Column 2
</td>
<td>Row 30,
Column 3
</td>
<td>Row 30,
Column 4
</td>
<td>Row 30,
Column 5
</td>
</tr>
<tr>
<td>Row 31,
Column 1
</td>
<td>Row 31,
Column 2
</td>
<td>Row 31,
Column 3
</td>
<td>Row 31,
Column 4
</td>
<td>Row 31,
Column 5
</td>
</tr>
<tr>
<td>Row 32,
Column 1
</td>
<td>Row 32,
Column 2
</td>
<td>Row 32,
Column 3
</td>
<td>Row 32,
Column 4
</td>
<td>Row 32,
Column 5
</td>
</tr>
<tr>
<td>Row 33,
Column 1
</td>
<td>Row 33,
Column 2
</td>
<td>Row 33,
Column 3
</td>
<td>Row 33,
Column 4
</td>
<td>Row 33,
Column 5
</td>
</tr>
<tr>
<td>Row 34,
Column 1
</td>
<td>Row 34,
Column 2
</td>
<td>Row 34,
Column 3
</td>
<td>Row 34,
Column 4
</td>
<td>Row 34,
Column 5
</td>
</tr>
<tr>
<td>Row 35,
Column 1
</td>
<td>Row 35,
Column 2
</td>
<td>Row 35,
Column 3
</td>
<td>Row 35,
Column 4
</td>
<td>Row 35,
Column 5
</td>
</tr>
< !-- End repeated rows -->
</tbody>
</table>
</div>
<div class="right-column">
< !-- Imagine n lines of stuff here,
that may or may not need to be scrolled -->
<h1>Example Header 1.</h1>
<h2>Example Header 2.</h2>
<h3>Example Header 3,
Number 1
</h3>
<h3>Example Header 3,
Number 2.
</h3>
<h3>Example Header 3,
Number 3.
</h3>
<h3>Example Header 3,
Number 4.
</h3>
<h3>Example Header 3,
Number 5.
</h3>
<h3>Example Header 3,
Number 6.
</h3>
<h3>Example Header 3,
Number 7.
</h3>
<h3>Example Header 3,
Number 8.
</h3>
<h3>Example Header 3,
Number 9.
</h3>
<h3>Example Header 3,
Number 10.
</h3>
<h3>Example Header 3,
Number 11.
</h3>
<h3>Example Header 3,
Number 12.
</h3>
<h3>Example Header 3,
Number 13.
</h3>
<h3>Example Header 3,
Number 14.
</h3>
<h3>Example Header 3,
Number 15.
</h3>
<h3>Example Header 3,
Number 16.
</h3>
<h3>Example Header 3,
Number 17.
</h3>
<h3>Example Header 3,
Number 18.
</h3>
<h3>Example Header 3,
Number 19.
</h3>
<h3>Example Header 3,
Number 20.
</h3>
</div>
</div>
<footer>Footer</footer>
</body>
</html>