Menu
Any type of Help is appreciate for resolving this issue:-
.one-scroll {
max-height: 160px;
max-width: 450px;
background: #f7f7f7;
position: relative;
z-index: 100 !important;
}
.one-scroll.table-scrollable {
overflow-x: hidden;
overflow-y: hidden;
}
.one-scroll.table-scrollable:hover {
overflow-x: auto;
overflow-y: auto;
z-index: 100 !important;
}<!Doctype html>
<html>
<head>
<style></style>
</head>
<body>
<br/>
<br/>
<section class="one-scroll table-scrollable">
<table class="table table-bordered">
<thead>
<tr>
<th>Select Module</th>
<th>Select Fields</th>
<th>Select Operators</th>
<th>Select Vaue</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><Select class="form-control">
<option>Related Module</option>
<option>Invoice</option>
<option>Account</option>
<option>Dispatch</option>
<option>Contact</option>
</select></td>
<td><Select class="form-control">
<option>Selct Field</option>
</select></td>
<td><Select class="form-control">
<option>Select Operators</option>
</select></td>
<td><Select class="form-control">
<option>Select Value</option>
<option>List Items</option>
</select></td>
<td><input type="button" class="btn btn-warning" value="Add Row" /></td>
</tr>
<tr>
<td><Select class="form-control">
<option>Related Module</option>
<option>Invoice</option>
<option>Account</option>
<option>Dispatch</option>
<option>Contact</option>
</select></td>
<td><Select class="form-control">
<option>Selct Field</option>
</select></td>
<td><Select class="form-control">
<option>Select Operators</option>
</select></td>
<td><Select class="form-control">
<option>Select Value</option>
<option>List Items</option>
</select></td>
<td><input type="button" class="btn btn-warning" value="Add Row" /></td>
</tr>
<tr>
<td><Select class="form-control">
<option>Related Module</option>
<option>Invoice</option>
<option>Account</option>
<option>Dispatch</option>
<option>Contact</option>
</select></td>
<td><Select class="form-control">
<option>Selct Field</option>
</select></td>
<td><Select class="form-control">
<option>Select Operators</option>
</select></td>
<td><Select class="form-control">
<option>Select Value</option>
<option>List Items</option>
</select></td>
<td><input type="button" class="btn btn-warning" value="Add Row" /></td>
</tr>
<tr>
<td><Select class="form-control">
<option>Related Module</option>
<option>Invoice</option>
<option>Account</option>
<option>Dispatch</option>
<option>Contact</option>
</select></td>
<td><Select class="form-control">
<option>Selct Field</option>
</select></td>
<td><Select class="form-control">
<option>Select Operators</option>
</select></td>
<td><Select class="form-control">
<option>Select Value</option>
<option>List Items</option>
</select></td>
<td><input type="button" class="btn btn-warning" value="Add Row" /></td>
</tr>
<tr>
<td><Select class="form-control">
<option>Related Module</option>
<option>Invoice</option>
<option>Account</option>
<option>Dispatch</option>
<option>Contact</option>
</select></td>
<td><Select class="form-control">
<option>Selct Field</option>
</select></td>
<td><Select class="form-control">
<option>Select Operators</option>
</select></td>
<td><Select class="form-control">
<option>Select Value</option>
<option>List Items</option>
</select></td>
<td><input type="button" class="btn btn-warning" value="Add Row" /></td>
</tr>
<tr>
<td><Select class="form-control">
<option>Related Module</option>
<option>Invoice</option>
<option>Account</option>
<option>Dispatch</option>
<option>Contact</option>
</select></td>
<td><Select class="form-control">
<option>Selct Field</option>
</select></td>
<td><Select class="form-control">
<option>Select Operators</option>
</select></td>
<td><Select class="form-control">
<option>Select Value</option>
<option>List Items</option>
</select></td>
<td><input type="button" class="btn btn-warning" value="Add Row" /></td>
</tr>
<tr>
<td><Select class="form-control">
<option>Related Module</option>
<option>Invoice</option>
<option>Account</option>
<option>Dispatch</option>
<option>Contact</option>
</select></td>
<td><Select class="form-control">
<option>Selct Field</option>
</select></td>
<td><Select class="form-control">
<option>Select Operators</option>
</select></td>
<td><Select class="form-control">
<option>Select Value</option>
<option>List Items</option>
</select></td>
<td><input type="button" class="btn btn-warning" value="Add Row" /></td>
</tr>
</tbody>
</table>
</section>
</body>
</html>
471
Seems like a known issue with Chrome 56.
You can fix it by adding these css rules and tweaking them to suit your design:
*::-webkit-scrollbar {
width: 6px!important;
height: 6px!important;
}
*::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,.2);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
