How to make a div that displays table-row-group vertically scrollable? - html

Question

I am building a table using only divs with the help of the css table display property(ies). I need my table to be flexible so I cannot use <table>.
Everything works fine except for .table-body. I set the display property to table-row-group so it behaves like a <tbody> but I want it to be scrollable. I set its overflow property to auto and it still does not work.
For example, I have this table:
<div class="table">
<div class="table-header">
<div class="table-row">
<div class="table-cell">Header 1</div>
<div class="table-cell">Header 2</div>
<div class="table-cell">Header 3</div>
</div>
</div>
<div class="table-body">
<div class="table-row">
<div class="table-cell">cell 1</div>
<div class="table-cell">cell 2</div>
<div class="table-cell">cell 3</div>
</div>
</div>
</div>
And this is the css for .table-body. I added a display property of table-row-group so it behaves like a <tbody>. It still does not have a scroll even with overflow set to auto.
.table-body {
display: table-row-group; // makes it behave like <tbody>
height: 100%;
overflow: auto; // does nothing
}

Answer 1

We need the following steps in order to achieve vertical scrolling:
1. Setting <tbody> to display:block so that we can apply the height and overflow property.
2. Setting the <thead><tr> to display:block.
But, since you are already using display property to set to table-related display values, I am not sure how can we apply two display values to a div.
You can achieve what you need using a slightly different approach though, like:
.fixed_header{
width: 400px;
table-layout: fixed;
border-collapse: collapse;
}
.fixed_header tbody{
display:block;
width: 100%;
overflow: auto;
height: 100px;
}
.fixed_header thead tr {
display: block;
}
.fixed_header thead {
background: black;
color:#fff;
}
.fixed_header th, .fixed_header td {
padding: 5px;
text-align: left;
width: 200px;
}
<table class="fixed_header">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1-0</td>
<td>row 1-1</td>
<td>row 1-2</td>
<td>row 1-3</td>
<td>row 1-4</td>
</tr>
<tr>
<td>row 2-0</td>
<td>row 2-1</td>
<td>row 2-2</td>
<td>row 2-3</td>
<td>row 2-4</td>
</tr>
<tr>
<td>row 3-0</td>
<td>row 3-1</td>
<td>row 3-2</td>
<td>row 3-3</td>
<td>row 3-4</td>
</tr>
<tr>
<td>row 4-0</td>
<td>row 4-1</td>
<td>row 4-2</td>
<td>row 4-3</td>
<td>row 4-4</td>
</tr>
<tr>
<td>row 5-0</td>
<td>row 5-1</td>
<td>row 5-2</td>
<td>row 5-3</td>
<td>row 5-4</td>
</tr>
<tr>
<td>row 6-0</td>
<td>row 6-1</td>
<td>row 6-2</td>
<td>row 6-3</td>
<td>row 6-4</td>
</tr>
<tr>
<td>row 7-0</td>
<td>row 7-1</td>
<td>row 7-2</td>
<td>row 7-3</td>
<td>row 7-4</td>
</tr>
</tbody>
</table>
Hope this helps.