我有代码让桌子达到一定高度时可以滚动。但是，当我实现代码时，它不会在实际表中更改任何内容。我有一个更改宽度的属性，可以正常工作。虽然height和scroll属性没有。我不确定为什么它不起作用。
.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>
答案 0 :(得分：1)
您需要添加特定的高度和溢出：以div包裹表格。 例如：
.table-responsive-sm {
max-height: 100px;
overflow: auto;
}
我建议您在该div中添加一个类，并使用该特定类设置样式。
答案 1 :(得分：0)
.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>
尝试一下