0

我有一个HTML table固定的标题。

所以，thead是fixed和tbody是scrollable。

现在，我想table height(vertical only)通过抓住底部tbody（比如将resize属性应用到textarea）来调整 的大小，这样我们一次可以看到更多数据。

4

3 回答 3

0

我认为你可以通过使用一点 css 来做到这一点，这非常简单。这是垂直调整 tbody 大小的部分；

例如，向您的 tbody ( <tbody id="tbody">) 添加一个 ID。这是CSS；

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

或者一个小的；

#tbody {
height: 100px;
}

我希望我能帮到你！

于 2015-05-27T10:42:42.990 回答
0

如果您想使用 jquery 执行此操作，请执行以下操作：

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

或者

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

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

于 2015-05-27T11:07:04.457 回答
0

我想你正在寻找这样的东西 

    <!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>
于 2015-05-27T17:34:13.353 回答