Question

我正在尝试创建一个宽度固定的表格（我不知道它的动态是如何工作的），对于大型数据集使用垂直滚动。我发现这可以用

完成

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。

Answer 1

这是我到目前为止所希望的，希望它有所帮助。

$('#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>

如何让用户动态调整表的高度？

1 个答案: