0
我有以下引導選項卡，這裏'活動'選項卡的內容小於視圖端口，'等待審查'選項卡的內容更多比查看端口，所以垂直滾動條出現。在這裏，我的問題是當我切換標籤，我看到一個混蛋。因爲垂直滾動條沒有出現在第一個標籤，因爲它的內容小於視圖端口，它佔用滾動條空間。我想防止這個混蛋，但我無法阻止。當滾動條出現和滾動條沒有出現時，這可能具有相同的寬度嗎？當垂直滾動條出現並且滾動條不出現時使用相同寬度的視口
.manage-rfq-row-one {
margin-top: 1.786rem;
}
1.
.manage-rfq-title>h1 {
margin: 0;
font-size: 2.429rem;
font-family: "Montserrat";
color: #393E41;
}
.manage-rfq-menu {
margin: 2.5rem 0 0.7143rem;
border-bottom: 2px solid #ddd;
}
.manage-rfq-menu>li>a {
font-size: 1rem;
font-family: "Montserrat";
color: #383D40;
padding: 10px 30px;
border: 2px solid transparent;
}
.manage-rfq-menu>li:first-child>a {
/*padding-left: 0px;*/
}
.manage-rfq-menu>li>a span {
background-color: #C7CACC;
}
.manage-rfq-menu>li.active>a span {
background-color: #ffcc29;
}
.manage-rfq-menu>li>a span .notification-count {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.manage-rfq-menu>li.active>a,
.manage-rfq-menu>li.active>a:focus,
.manage-rfq-menu>li.active>a:hover {
color: #000;
background-color: #fff;
border: 2px solid #ddd;
border-bottom-color: transparent;
}
.manage-rfq-menu>li {
margin-bottom: -2px;
}
.manage-rfq-menu>li>a:hover {
background-color: transparent;
border-color: transparent;
}
.manage-rfq-tbl {
border: 1px solid #ccc;
margin-bottom: 5px;
}
.manage-rfq-tbl>thead>tr>th {
color: #7C7D7E;
font-size: 0.85rem;
}
.manage-rfq-tbl>thead>tr>th:first-child {
padding-left: 1.786rem;
}
.manage-rfq-tbl>tbody>tr>td {
font-size: 1.071rem;
font-family: 'montserrat';
vertical-align: middle;
}
.manage-product-notification {
min-width: 20px;
min-height: 20px;
position: relative;
display: inline-block;
color: #65686A;
font-family: 'Lato';
border-radius: 50%;
font-weight: bold;
font-size: 0.7143rem;
vertical-align: bottom;
}
.manage-rfq-tbl>tbody>tr>td.mnage-prduct-title {
width: 26%;
padding-left: 1.786rem;
padding-top: 1.429rem;
padding-bottom: 1.429rem;
}
.mnage-prduct-img-wrap,
.posted-on-rfq {
width: 26%;
}
.expiry-date {
width: 19%;
}
.mnage-ur-prducts {
width: 29%;
}
.mnage-prduct-img {
width: 10.14rem;
height: 10.14rem;
padding-top: 1.571rem;
padding-bottom: 1.571rem;
}
.mnage-prduct-img>img {
width: 10.14rem;
height: 10.14rem;
border: 1px solid #ccc;
}
.manage-rfq-tbl>tbody>tr>td.mnage-ur-prducts i {
color: #B8C0C5;
padding-right: 0.3571rem;
}
.manage-rfq-tbl>tbody>tr>td.mnage-ur-prducts a {
padding-right: 2.143rem;
}
[data-ttip] {
position: relative;
}
[data-ttip]:hover:before {
content: attr(data-ttip);
position: absolute;
margin: 0;
bottom: 28px;
left: -6.143rem;
min-width: 16.29rem;
background-color: #F7FBFC;
font-size: 0.9286rem;
font-family: "Montserrat";
color: #6B6E70;
padding: 10px;
border-radius: 2px;
}
.mnage-prduct-resume>a[data-ttip]:hover:before {
left: -4.143rem;
}
[data-ttip]:hover:after {
content: '';
position: absolute;
border-top: 11px solid #F7FBFC;
border-right: 11px solid transparent;
border-left: 11px solid transparent;
bottom: 18px;
left: 10px;
}
.mnage-prduct-resume>a[data-ttip]:hover:after {
left: 40px;
}
.mnage-ur-prducts i {
color: #686868 !important;
}
.mnage-rfq-search-box {
margin-top: 0.2857rem;
width: 15.86rem;
}<script src="https://use.fontawesome.com/aacdcb9275.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row manage-rfq-row-two">
<div class="col-sm-12">
<ul class="nav nav-tabs manage-rfq-menu">
<li class="active"><a data-toggle="tab" href="#home">ACTIVE <span class="manage-product-notification"><span class="notification-count">7</span></span></a></li>
<li><a data-toggle="tab" href="#menu1">PENDING REVIEW <span class="manage-product-notification"><span class="notification-count">77</span></span></a></li>
<li class="pointer"></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<table class="table manage-rfq-tbl">
<thead>
<tr>
<th>TITLE</th>
<th>POSTED/EDITED ON</th>
<th>EXPIRY</th>
<th>ACTION</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="menu1" class="tab-pane fade">
<table class="table manage-rfq-tbl">
<thead>
<tr>
<th>TITLE</th>
<th>POSTED/EDITED ON</th>
<th>EXPIRY</th>
<th>ACTION</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mnage-prduct-title">Paper Machine</td>
<td class="posted-on-rfq">Mar 27, 2017</td>
<td class="expiry-date">Apr 1, 2019</td>
<td class="mnage-ur-prducts">
<span class="mnage-prduct-edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> <a href="#" class="link">Edit</a></span>
<!-- <span class="mnage-prduct-pause"><i class="fa fa-pause-circle-o" aria-hidden="true"></i> <a href="#" class="link" data-ttip="Click to stop showing this product on your company profile.">Pause</a></span>
<span class="mnage-prduct-resume"><i class="fa fa-play-circle-o" aria-hidden="true"></i> <a href="#" class="link" data-ttip="Click to again start displaying this product on your company profile.">Resume Display</a></span> -->
<span><i class="fa fa-trash" aria-hidden="true"></i> <a href="#" class="link">Delete</a></ABBR></span></td>
</tr>
<tr>
<td class="mnage-prduct-title">Kraft Paper Rolls</td>
<td class="posted-on-rfq">Feb 2, 2016</td>
<td class="expiry-date">Mar 7, 2019</td>
<td class="mnage-ur-prducts">
<span class="mnage-prduct-edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> <a href="#" class="link">Edit</a></span>
<!-- <span class="mnage-prduct-pause"><i class="fa fa-pause-circle-o" aria-hidden="true"></i> <a href="#" class="link" data-ttip="Click to stop showing this product on your company profile.">Pause</a></span>
<span class="mnage-prduct-resume"><i class="fa fa-play-circle-o" aria-hidden="true"></i> <a href="#" class="link" data-ttip="Click to again start displaying this product on your company profile.">Resume Display</a></span> -->
<span><i class="fa fa-trash" aria-hidden="true"></i> <a href="#" class="link">Delete</a></ABBR></span></td>
</tr>
<tr>
<td class="mnage-prduct-title">Paper Machine</td>
<td class="posted-on-rfq">Mar 27, 2017</td>
<td class="expiry-date">Mar 27, 2018</td>
<td class="mnage-ur-prducts">
<span class="mnage-prduct-edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> <a href="#" class="link">Edit</a></span>
<span><i class="fa fa-trash" aria-hidden="true"></i> <a href="#" class="link">Delete</a></ABBR></span></td>
</tr>
<tr>
<td class="mnage-prduct-title">Paper Machine</td>
<td class="posted-on-rfq">Mar 27, 2017</td>
<td class="expiry-date">Mar 27, 2018</td>
<td class="mnage-ur-prducts">
<span class="mnage-prduct-edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> <a href="#" class="link">Edit</a></span>
<span><i class="fa fa-trash" aria-hidden="true"></i> <a href="#" class="link">Delete</a></ABBR></span></td>
</tr>
<tr>
<td class="mnage-prduct-title">Paper Machine</td>
<td class="posted-on-rfq">Mar 27, 2017</td>
<td class="expiry-date">Mar 27, 2018</td>
<td class="mnage-ur-prducts">
<span class="mnage-prduct-edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> <a href="#" class="link">Edit</a></span>
<span><i class="fa fa-trash" aria-hidden="true"></i> <a href="#" class="link">Delete</a></ABBR></span></td>
</tr>
<tr>
<td class="mnage-prduct-title">Paper Machine</td>
<td class="posted-on-rfq">Mar 27, 2017</td>
<td class="expiry-date">Mar 27, 2018</td>
<td class="mnage-ur-prducts">
<span class="mnage-prduct-edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> <a href="#" class="link">Edit</a></span>
<span><i class="fa fa-trash" aria-hidden="true"></i> <a href="#" class="link">Delete</a></ABBR></span></td>
</tr>
<tr>
<td class="mnage-prduct-title">Paper Machine</td>
<td class="posted-on-rfq">Mar 27, 2017</td>
<td class="expiry-date">Mar 27, 2018</td>
<td class="mnage-ur-prducts">
<span class="mnage-prduct-edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> <a href="#" class="link">Edit</a></span>
<span><i class="fa fa-trash" aria-hidden="true"></i> <a href="#" class="link">Delete</a></ABBR></span></td>
</tr>
<tr>
<td class="mnage-prduct-title">Paper Machine</td>
<td class="posted-on-rfq">Mar 27, 2017</td>
<td class="expiry-date">Mar 27, 2018</td>
<td class="mnage-ur-prducts">
<span class="mnage-prduct-edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> <a href="#" class="link">Edit</a></span>
<span><i class="fa fa-trash" aria-hidden="true"></i> <a href="#" class="link">Delete</a></ABBR></span></td>
</tr>
</tbody>
</table>
</div>