Question

我有HTML table固定标题。

因此，thead为fixed，tbody为scrollable。

现在，我想通过抓住table height(vertical only)的底部（例如将tbody属性应用到resize）来调整textarea的大小，以便我们可以在一段时间。

Answer 1

我认为你可以通过使用一点css来做到这一点，它非常简单。这是调整tbody verticaly的部分;

例如，

为您的tbody（<tbody id="tbody">）添加ID。这是CSS;

#tbody {
height: 500px; (a very tall tbody)
}

或小的;

#tbody {
height: 100px;
}

我希望我能帮助你！

Answer 2

如果你想使用jquery来做，那么做这样的事情：

$(document).ready(function(){
  $("#your_table_id").css('height','250px');
 });

或

 $(document).ready(function(){
  $("#your_table_id").height($("#your_height_equal").height());
 });

第二种方法是使高度等于另一个表或div等。

Answer 3

我认为您正在寻找类似的内容

    <!DOCTYPE html>

<head>
  <meta charset="utf-8">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

  <style>
  #window {
      width: 500px;
      height: 400px;
      min-width: 100px;
      min-height: 100px;
      border-bottom: 1px solid gray;
  }
  #header {
      height: 25px;
      line-height: 25px;
      background-color: gray;
      color: white;
      text-align: center;
  }
  table {
      min-height: 300px;
      height: 100%;
      width: 100%;
      border-collapse: collapse;
  }
  #tableContainer {
      position: absolute;
      top: 25px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      margin: 0;
      padding: 0;
      overflow: auto;
  }
  td {
      padding: 5px;
      margin: 0px;
      border: 1px solid gray;
  }
  tr:last-child td {
      border-bottom: none;
  }
  </style>
</head>
<body>
  <div id="window">
      <div id="header">Draggable Header</div>
      <div id="tableContainer">
          <table>
              <thead>
                  <tr>
                      <td>Column 1</td>
                      <td>Column 2</td>
                  </tr>
              </thead>
              <tbody>
                  <tr>
                      <td>Data 1</td>
                      <td>Data 2</td>
                  </tr>
                  <tr>
                      <td>Data 1</td>
                      <td>Data 2</td>
                  </tr>
                  <tr>
                      <td>Data 1</td>
                      <td>Data 2</td>
                  </tr>
                  <tr>
                      <td>Data 1</td>
                      <td>Data 2</td>
                  </tr>
                  <tr>
                      <td>Data 1</td>
                      <td>Data 2</td>
                  </tr>
                  <tr>
                      <td>Data 1</td>
                      <td>Data 2</td>
                  </tr>
                  <tr>
                      <td>Data 1</td>
                      <td>Data 2</td>
                  </tr>
              </tbody>
          </table>
      </div>
  </div>

<script>

  $(document).ready(function () {
      $('#window').draggable();
      $('#window').resizable();
  });

</script>

</body>
</html>

如何垂直调整html表的大小

3 个答案: