kane_004
Reputation: 263
How to fix table overflow to have it automatically scroll?
I have the code to allow my table to scroll when a certain height is reached. However, when I implement the code it does not change anything in the actual table. I have a attribute that changes the width, which works. Though the height and scroll attribute does not. I am not sure why it is not working.
.tableScroll {
width: 50em;
height: 10px;
overflow: scroll;
} <div class="col-md-9 right-pane">
<div class="row">
<!--<div class="col col-md-12"> tyler mark -->
<h6>General Information</h6>
<span class="label">*Tier:</span>
<div class="col col-lg-12 search-bar">
<select class="select" data-placeholder="Select...">
<option value="AL">Alabama</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<span class="label">Type:</span>
<div class="col col-lg-12 search-bar">
<select class="select" data-placeholder="Select...">
<option value="AL">Alabama</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<span class="label">Name:</span>
<div class="col col-lg-12 search-bar">
<input class="form-control form-control-sm" type="text">
</div>
<div class="col col-lg-12 search-bar">
<select class="select" data-placeholder="Select...">
<option value="AL">Alabama</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<div class="col col-lg-12 search-bar text-right">
<button class=" btn btn-primary btn-sm"> Select</button>
</div>
<div class="col col-md-12">
<br>
<br>
<h6>Deployment Components:</h6>
<div class="table-responsive-sm">
<table class="table table-sm table-hover tableScroll">
<tbody id="mytab">
<tr>
<td>C://IIS</td>
</tr>
<tr>
<td>C://SQL</td>
</tr>
<tr>
<td>C://Windows File Share</td>
</tr>
<tr>
<td>C://Etc</td>
</tr>
<tr>
<td>C://IIS</td>
</tr>
<tr>
<td>C://SQL</td>
</tr>
<tr>
<td>C://Windows File Share</td>
</tr>
<tr>
<td>C://Etc</td>
</tr>
<tr>
<td>C://IIS</td>
</tr>
<tr>
<td>C://SQL</td>
</tr>
<tr>
<td>C://Windows File Share</td>
</tr>
<tr>
<td>C://Etc</td>
</tr>
<tr>
<td>C://IIS</td>
</tr>
<tr>
<td>C://SQL</td>
</tr>
<tr>
<td>C://Windows File Share</td>
</tr>
<tr>
<td>C://Etc</td>
</tr>
</tbody>
</table>
</div>
<br>
</div>
<!--</div> tyler mark-->
</div>
<div class="row">
<div class="col col-md-12">
<br>
<br>
<h6>Selection Preview</h6>
<span class="label">Query</span>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3">SELECT * FROM WebService WHERE EXISTS (module.fileName ends-with '/1AS')</textarea>
<br>
</div>
</div>
</div>Upvotes: 0
Views: 49
Answers (2)
Awais
Reputation: 4902
.tableScroll {
width: 20em;
height: 200px;
overflow: auto;
}<div class="col-md-9 right-pane">
<div class="row">
<!--<div class="col col-md-12"> tyler mark -->
<h6>General Information</h6>
<span class="label">*Tier:</span>
<div class="col col-lg-12 search-bar">
<select class="select" data-placeholder="Select...">
<option value="AL">Alabama</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<span class="label">Type:</span>
<div class="col col-lg-12 search-bar">
<select class="select" data-placeholder="Select...">
<option value="AL">Alabama</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<span class="label">Name:</span>
<div class="col col-lg-12 search-bar">
<input class="form-control form-control-sm" type="text">
</div>
<div class="col col-lg-12 search-bar">
<select class="select" data-placeholder="Select...">
<option value="AL">Alabama</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<div class="col col-lg-12 search-bar text-right">
<button class=" btn btn-primary btn-sm"> Select</button>
</div>
<div class="col col-md-12">
<br>
<br>
<h6>Deployment Components:</h6>
<div class="table-responsive-sm tableScroll">
<table class="table table-sm table-hover ">
<tbody id="mytab">
<tr>
<td>C://IIS</td>
</tr>
<tr>
<td>C://SQL</td>
</tr>
<tr>
<td>C://Windows File Share</td>
</tr>
<tr>
<td>C://Etc</td>
</tr>
<tr>
<td>C://IIS</td>
</tr>
<tr>
<td>C://SQL</td>
</tr>
<tr>
<td>C://Windows File Share</td>
</tr>
<tr>
<td>C://Etc</td>
</tr>
<tr>
<td>C://IIS</td>
</tr>
<tr>
<td>C://SQL</td>
</tr>
<tr>
<td>C://Windows File Share</td>
</tr>
<tr>
<td>C://Etc</td>
</tr>
<tr>
<td>C://IIS</td>
</tr>
<tr>
<td>C://SQL</td>
</tr>
<tr>
<td>C://Windows File Share</td>
</tr>
<tr>
<td>C://Etc</td>
</tr>
</tbody>
</table>
</div>
<br>
</div>
<!--</div> tyler mark-->
</div>
<div class="row">
<div class="col col-md-12">
<br>
<br>
<h6>Selection Preview</h6>
<span class="label">Query</span>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3">SELECT * FROM WebService WHERE EXISTS (module.fileName ends-with '/1AS')</textarea>
<br>
</div>
</div>
</div>TRY This
Upvotes: 0
pegah
Reputation: 166
you need to add specific height and overflow:auto; to div that wrap your table. for example:
.table-responsive-sm {
max-height: 100px;
overflow: auto;
}
I suggest you add a class to this div, and style with this specific class.
Upvotes: 1
Related Questions
- Table Width 100% with Overflow Scroll
- How to add horizontal scroll on table overflow?
- Table with scroll and auto size columns
- How to make overflow scroll to table data
- Table in Div overflows from DIV , how can I enable Scrolling on the page NOT the DIV without editing HTML just using CSS?
- html table should overflow
- How to get overflow:auto behavior with HTML table
- HTML table with 100% overflow scroll for table only
- Table overflow issue
- div has a table in it does not scroll