Make vertical Scrollbar visible keeping table header static
Question
I have a table that is built with div tags (not html table tag), I'm trying to make the table scrollable horizontally and vertically keeping the header static.
I'm able to do that except that the vertical scrollbar is visible only when the horizontal scrollbar is scrolled till the end.
Can anyone help me fix this please ?
Here's a sample jsfiddle I've created. That is a rough fiddle I've created for posting here, Apologies for the bad styling.
Html :
<div class="query-grid-container">
<div class="table-container">
<div class="list-container">
<div style="width: 2000px;">
<div class="header-cell" style="width: 250px;">
<div class="cell-wrapper">
<div class="sort" role="Button" tabindex="0">
<span class="column-name">Detected Data Classification Type</span>
</div>
</div>
</div>
<div class="header-cell" style="width: 250px;">
<div class="cell-wrapper">
<div class="sort" role="Button" tabindex="0">
<span class="column-name">Asset Name</span>
</div>
</div>
</div>
<div class="header-cell" style="width: 250px;">
<div class="cell-wrapper">
<div class="sort" role="Button" tabindex="0">
<span class="column-name">Selected Data Classifications</span>
</div>
</div>
</div>
<div class="header-cell" style="width: 250px;">
<div class="cell-wrapper">
<div class="sort" role="Button" tabindex="0">
<span class="column-name">Detected Data Classifications</span>
</div>
</div>
</div>
<div class="header-cell" style="width: 250px;">
<div class="cell-wrapper">
<div class="sort" role="Button" tabindex="0">
<span class="column-name">Short Description</span>
</div>
</div>
</div>
<div class="header-cell" style="width: 250px;">
<div class="cell-wrapper">
<div class="sort" role="Button" tabindex="0">
<span class="column-name">someTitle0</span>
</div>
</div>
</div>
<div class="header-cell" style="width: 250px;">
<div class="cell-wrapper">
<div class="sort" role="Button" tabindex="0">
<span class="column-name">someTitle1</span>
</div>
</div>
</div>
<div class="header-cell" style="width: 250px;">
<div class="cell-wrapper">
<div class="sort" role="Button" tabindex="0">
<span class="column-name">someTitle2</span>
</div>
</div>
</div>
</div>
<div class="rows-container" style="width: 2000px;">
<div class="row" tabindex="0" role="row">
<div class="cell-group">
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[Inferred]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">
<div>
<a href="#">Account Number</a>
</div>
</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">
<div>
<a href="#">ACCOUNT_ID</a>
</div>
</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[ACCOUNT_ID, ACCOUNT_ID]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">A value representing an Account Number.</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
</div>
</div>
<div class="row" tabindex="0" role="row">
<div class="cell-group">
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">
<div>
<a href="#">Address Line 3</a>
</div>
</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">Address Line 3 of a multi-line address.</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
</div>
</div>
<div class="row" tabindex="0" role="row">
<div class="cell-group">
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">
<div>
<a href="#">Address Line 1</a>
</div>
</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">Address Line 1 of a multi-line address.</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
</div>
</div>
<div class="row" tabindex="0" role="row">
<div class="cell-group">
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">
<div>
<a href="#">Address Line 2</a>
</div>
</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">Address Line 2 of a multi-line address.</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
</div>
</div>
<div class="row" tabindex="0" role="row">
<div class="cell-group">
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">
<div>
<a href="#">Airport Code</a>
</div>
</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">A string representing the IATA airport code.</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
</div>
</div>
<div class="row" tabindex="0" role="row">
<div class="cell-group">
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">
<div>
<a href="#">Alabama State Driver's License</a>
</div>
</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">A string representing driver license of US state Alabama.</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
</div>
</div>
<div class="row" tabindex="0" role="row">
<div class="cell-group">
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">
<div>
<a href="#">Alaska State Driver's License</a>
</div>
</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">A seven digits number representing driver license of US state Alaska.</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
</div>
</div>
<div class="row" tabindex="0" role="row">
<div class="cell-group">
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">
<div>
<a href="#">Alberta Province Driver's License</a>
</div>
</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">A string representing driver license of Canadian province Alberta.</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
</div>
</div>
<div class="row" tabindex="0" role="row">
<div class="cell-group">
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">
<div>
<a href="#">American Express Card</a>
</div>
</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">A 16-18 character number that identifies an American Express credit card account.</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
</div>
</div>
<div class="row" tabindex="0" role="row">
<div class="cell-group">
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">
<div>
<a href="#">Arizona State Driver's License</a>
</div>
</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">A string representing driver license of US state Arizona.</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
<div class="cell" style="width: 250px;">
<div class="cell-wrapper">[]</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.query-grid-container {
height: calc(100% - 160px);
margin: 48px 68px 0;
position: absolute;
width: calc(100% - 136px);
border: 2px solid red;
}
.loader-container {
position: relative;
margin-top: 1em;
}
.search-table-container {
height: 100%;
}
.table-container {
height: calc(100% - 72px);
}
.top-container {
padding: 14px 30px 15px;
background: color("white");
}
.result-title {
color: color("blue", 80);
font-size: 20px;
font-weight: 600;
line-height: 24px;
}
.result-sub-title {
color: color("gray", 60);
font-size: 12px;
font-weight: 500;
line-height: 16px;
margin-top: 3px;
}
.no-result-title {
font-weight: 400;
}
.no-result-container {
height: calc(100% - 50px);
padding-top: 24px;
display: flex;
flex-direction: column;
align-items: center;
background: color("white");
}
.no-result-text {
margin-top: 6px;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.no-result-top-container {
border-bottom: 1px solid color("gray", 10);
padding: 14px 30px;
background: color("white");
}
.name-header {
padding-left: 20px;
}
.query-description-container {
margin: 10px 0 14px 0;
padding-left: 12px;
font-size: 14px;
word-wrap: break-word;
width: calc(100% - 60px);
}
.cell-wrapper {
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
font-weight: bold;
line-height: normal;
padding: 6px 0 10px 10px;
}
.table-container {
width: 100%;
height: 100%;
display: flex;
flex-flow: column;
background-color: color('white');
}
.list-container {
overflow-x: auto;
overflow-y: hidden;
}
.rows-container {
height: 300px;
overflow-y: scroll;
overflow-x: hidden;
}
.header-cell {
display: inline-block;
border-top: 1px solid color("grey", 10);
border-bottom: 2px solid color("grey", 10);
vertical-align: bottom;
position: relative;
}
.cell-wrapper {
padding: 15px 0 9px;
line-height: 24px;
display: flex;
}
.checkbox-wrapper {
margin-left: 38px;
display: flex;
}
.column-name {
color: color("blue", 80);
opacity: 1;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
margin: auto 6px auto 0;
padding: 0 10px 0 10px;
}
.sort {
display: flex;
height: 24px;
margin: 0 0 0 2px;
}
.sort.sort-btn {
cursor: pointer;
}
.sort.sort-btn:hover {
background-color: color("gray", 10, 0.2);
}
.sort .sort-icon {
transition: all .25s ease-in-out;
margin: auto;
}
.sort .sort-icon.sort-asc {
transform: rotate(180deg);
}
.sort .sort-icon .sort-desc {
transform: rotate(0);
}
.checkbox-wrapper-class {
height: 16px;
width: 16px;
margin-right: 2px;
line-height: 21px;
}
.checkbox-wrapper-class > label {
bottom: 16px;
}
.cell {
display: inline-block;
text-overflow: ellipsis;
flex: 1 0 auto;
position: relative;
}
.row {
outline: none;
text-overflow: ellipsis;
}
.cell-group {
display: flex;
flex-flow: row;
}
2 answers
solution1
0 2018-03-05 21:15:46
You have the overflow: scroll; on the wrong element. You need to remove overflow-x: auto; and overflow-y: hidden; from .list-container. You also need to remove height: 300px; , overflow-y: scroll; and overflow-x: hidden; . Once you do that you can just add overflow: scroll; to .table-container and then the horizontal scroll be fixed to the bottom and the vertical scroll be fixed to the right.
.query-grid-container { height: calc(100% - 160px); margin: 48px 68px 0; position: absolute; width: calc(100% - 136px); border: 2px solid red; } .loader-container { position: relative; margin-top: 1em; } .search-table-container { height: 100%; } .table-container { height: calc(100% - 72px); overflow: scroll; } .top-container { padding: 14px 30px 15px; background: color("white"); } .result-title { color: color("blue", 80); font-size: 20px; font-weight: 600; line-height: 24px; } .result-sub-title { color: color("gray", 60); font-size: 12px; font-weight: 500; line-height: 16px; margin-top: 3px; } .no-result-title { font-weight: 400; } .no-result-container { height: calc(100% - 50px); padding-top: 24px; display: flex; flex-direction: column; align-items: center; background: color("white"); } .no-result-text { margin-top: 6px; font-size: 16px; font-weight: 400; line-height: 24px; } .no-result-top-container { border-bottom: 1px solid color("gray", 10); padding: 14px 30px; background: color("white"); } .name-header { padding-left: 20px; } .query-description-container { margin: 10px 0 14px 0; padding-left: 12px; font-size: 14px; word-wrap: break-word; width: calc(100% - 60px); } .cell-wrapper { position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: bold; line-height: normal; padding: 6px 0 10px 10px; } .table-container { width: 100%; height: 100%; display: flex; flex-flow: column; background-color: color('white'); } .header-cell { border-top: 1px solid color("grey", 10); border-bottom: 2px solid color("grey", 10); vertical-align: bottom; position: relative; float: left; } .cell-wrapper { padding: 15px 0 9px; line-height: 24px; display: flex; } .checkbox-wrapper { margin-left: 38px; display: flex; } .column-name { color: color("blue", 80); opacity: 1; font-size: 14px; font-weight: 600; text-transform: uppercase; margin: auto 6px auto 0; padding: 0 10px 0 10px; } .sort { display: flex; height: 24px; margin: 0 0 0 2px; } .sort.sort-btn { cursor: pointer; } .sort.sort-btn:hover { background-color: color("gray", 10, 0.2); } .sort .sort-icon { transition: all .25s ease-in-out; margin: auto; } .sort .sort-icon.sort-asc { transform: rotate(180deg); } .sort .sort-icon .sort-desc { transform: rotate(0); } .checkbox-wrapper-class { height: 16px; width: 16px; margin-right: 2px; line-height: 21px; } .checkbox-wrapper-class > label { bottom: 16px; } .cell { display: inline-block; text-overflow: ellipsis; flex: 1 0 auto; position: relative; } .row { outline: none; text-overflow: ellipsis; } .cell-group { display: flex; flex-flow: row; }
<!DOCTYPE html> <html> <head> <title>testtt</title> </head> <link rel="stylesheet" type="text/css" href="styles.css"> <body> <div class="query-grid-container"> <div class="table-container"> <div class="list-container"> <div style="width: 2000px; height: 50px;"> <div class="header-cell" style="width: 250px;"> <div class="cell-wrapper"> <div class="sort" role="Button" tabindex="0"> <span class="column-name">Detected Data Classification Type</span> </div> </div> </div> <div class="header-cell" style="width: 250px;"> <div class="cell-wrapper"> <div class="sort" role="Button" tabindex="0"> <span class="column-name">Asset Name</span> </div> </div> </div> <div class="header-cell" style="width: 250px;"> <div class="cell-wrapper"> <div class="sort" role="Button" tabindex="0"> <span class="column-name">Selected Data Classifications</span> </div> </div> </div> <div class="header-cell" style="width: 250px;"> <div class="cell-wrapper"> <div class="sort" role="Button" tabindex="0"> <span class="column-name">Detected Data Classifications</span> </div> </div> </div> <div class="header-cell" style="width: 250px;"> <div class="cell-wrapper"> <div class="sort" role="Button" tabindex="0"> <span class="column-name">Short Description</span> </div> </div> </div> <div class="header-cell" style="width: 250px;"> <div class="cell-wrapper"> <div class="sort" role="Button" tabindex="0"> <span class="column-name">someTitle0</span> </div> </div> </div> <div class="header-cell" style="width: 250px;"> <div class="cell-wrapper"> <div class="sort" role="Button" tabindex="0"> <span class="column-name">someTitle1</span> </div> </div> </div> <div class="header-cell" style="width: 250px;"> <div class="cell-wrapper"> <div class="sort" role="Button" tabindex="0"> <span class="column-name">someTitle2</span> </div> </div> </div> </div> <div class="rows-container" style="width: 2000px;"> <div class="row" tabindex="0" role="row"> <div class="cell-group"> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[Inferred]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper"> <div> <a href="#">Account Number</a> </div> </div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper"> <div> <a href="#">ACCOUNT_ID</a> </div> </div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[ACCOUNT_ID, ACCOUNT_ID]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">A value representing an Account Number.</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> </div> </div> <div class="row" tabindex="0" role="row"> <div class="cell-group"> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper"> <div> <a href="#">Address Line 3</a> </div> </div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">Address Line 3 of a multi-line address.</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> </div> </div> <div class="row" tabindex="0" role="row"> <div class="cell-group"> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper"> <div> <a href="#">Address Line 1</a> </div> </div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">Address Line 1 of a multi-line address.</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> </div> </div> <div class="row" tabindex="0" role="row"> <div class="cell-group"> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper"> <div> <a href="#">Address Line 2</a> </div> </div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">Address Line 2 of a multi-line address.</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> </div> </div> <div class="row" tabindex="0" role="row"> <div class="cell-group"> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper"> <div> <a href="#">Airport Code</a> </div> </div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">A string representing the IATA airport code.</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> </div> </div> <div class="row" tabindex="0" role="row"> <div class="cell-group"> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper"> <div> <a href="#">Alabama State Driver's License</a> </div> </div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">A string representing driver license of US state Alabama.</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> </div> </div> <div class="row" tabindex="0" role="row"> <div class="cell-group"> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper"> <div> <a href="#">Alaska State Driver's License</a> </div> </div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">A seven digits number representing driver license of US state Alaska.</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> </div> </div> <div class="row" tabindex="0" role="row"> <div class="cell-group"> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper"> <div> <a href="#">Alberta Province Driver's License</a> </div> </div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">A string representing driver license of Canadian province Alberta.</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> </div> </div> <div class="row" tabindex="0" role="row"> <div class="cell-group"> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper"> <div> <a href="#">American Express Card</a> </div> </div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">A 16-18 character number that identifies an American Express credit card account.</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> </div> </div> <div class="row" tabindex="0" role="row"> <div class="cell-group"> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper"> <div> <a href="#">Arizona State Driver's License</a> </div> </div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">A string representing driver license of US state Arizona.</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> <div class="cell" style="width: 250px;"> <div class="cell-wrapper">[]</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>
solution2
0 2018-03-06 06:59:14
Remove the inline style
overflow: scrollbelow the divlist-container,Remove the css style
overflow-y:hiddenfor.list-containerRemove the
overflow-y: scrollfor.rows-container!!
This works as expected!!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Fixed table header with vertical and horizontal scrollbar using pure javascript
Why is the vertical scrollbar always visible
PowerBI Embedded vertical scrollbar not visible
Vertical scrollbar position in a table
Fixed header is hiding vertical scrollbar
Vertical Scrollbar is not visible in IE 11 for textarea
Make scrollbar visible in mobile browsers
Make perfect scrollbar visible by default
TextArea without vertical Scrollbar as long as numbers of visible rows are not used
Table tbody vertical scrollbar flickering on scroll
Related Tags