我正在尝试创建一个宽度固定的表格(我不知道如果它也是动态的它会如何工作)，并为大型数据集提供垂直滚动。我发现这可以用
div {
width: 350px;
height: 110px;
border: thin solid black;
overflow-x: scroll;
overflow-y: scroll;
}<div><table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table></div>我想要的是两件事:
当浏览器窗口宽度被用户减小甚至在大显示器中增加时，表格将如何表现良好？
如何制作具有初始高度但允许用户在单击底部边框并将其拖动到下方或向上移动时动态增加或减小高度的 div。并且滚动也应该相应地调整。意思是，当表格扩展到最后一个数据集(或固定的最大高度)时，滚动应该停止，而当高度减小时(需要固定可能的最小高度)，滚动应该回来。
我在 React 页面中使用它，所以不要让事情变得复杂，如果可能的话，我只想要 Bootstrap CSS 东西。
最佳答案
这就是我目前的情况，希望对您有所帮助。
$('#resize').resizable({
helper: "ui-resizable-helper",
grid: [10, 10]
});.ui-resizable-helper {
border: 1px dotted #999;
}
#resize {
background-color: #91d4ff;
}
.demodiv {
width: 350px;
height: 110px;
border: thin solid black;
overflow-x: scroll;
overflow-y: scroll;
}
.demodiv {
height: 250px;
width: 100%;
float: left;
margin-left: 5px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<div id="resize" class="demodiv">
<div class="aa">
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
</div>
</div>关于javascript - 如何允许用户动态调整表格的高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47975424/