使垂直滚动条可见，使表标题保持静态
[英]Make vertical Scrollbar visible keeping table header static
问题描述
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. 
我有一个用div标签（不是html table标签）构建的表，我试图使该表可水平和垂直滚动，以保持标题为静态。
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. 这是我创建的一个示例jsfiddle 。 That is a rough fiddle I've created for posting here, Apologies for the bad styling. 这是我为在此处发布而创建的一个粗略的小提琴，为样式不好而道歉。
Html : 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: 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 个解决方案
解决方案1
0 2018-03-05 21:15:46
You have the overflow: scroll; 您有overflow: scroll; on the wrong element. 在错误的元素上。 You need to remove overflow-x: auto; 您需要删除overflow-x: auto; and overflow-y: hidden; 和overflow-y: hidden; from .list-container. 来自.list-container。 You also need to remove height: 300px; 您还需要删除height: 300px; , overflow-y: scroll; ， overflow-y: scroll; and overflow-x: hidden; 和overflow-x: hidden; . 。 Once you do that you can just add overflow: scroll; 一旦这样做，就可以添加overflow: scroll; to .table-container and then the horizontal scroll be fixed to the bottom and the vertical scroll be fixed to the right. 到.table-container，然后将水平滚动条固定在底部，将垂直滚动条固定在右侧。
.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>
解决方案2
0 2018-03-06 06:59:14
Remove the inline style
overflow: scrollbelow the divlist-container,消除内联样式overflow: scroll在divlist-container下方overflow: scroll，Remove the css style
overflow-y:hiddenfor.list-container删除.list-container的CSS样式overflow-y:hiddenRemove the
overflow-y: scrollfor.rows-container!!删除overflow-y: scroll到.rows-container！
This works as expected!! 这按预期工作！！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使用纯JavaScript修复了带有垂直和水平滚动条的表格标题 - Fixed table header with vertical and horizontal scrollbar using pure javascript
为什么垂直滚动条总是可见 - Why is the vertical scrollbar always visible
PowerBI 嵌入式垂直滚动条不可见 - PowerBI Embedded vertical scrollbar not visible
表格中的垂直滚动条位置 - Vertical scrollbar position in a table
固定标题隐藏垂直滚动条 - Fixed header is hiding vertical scrollbar
垂直滚动条在IE 11中对于textarea不可见 - Vertical Scrollbar is not visible in IE 11 for textarea
使滚动条在移动浏览器中可见 - Make scrollbar visible in mobile browsers
默认情况下使完美的滚动条可见 - Make perfect scrollbar visible by default
只要不使用可见行数，TextArea 就没有垂直滚动条 - TextArea without vertical Scrollbar as long as numbers of visible rows are not used
表tbody垂直滚动条在滚动时闪烁 - Table tbody vertical scrollbar flickering on scroll
相关标签