0

HTML table固定ヘッダーがあります。

そう、theadでありfixed、tbodyであるscrollable。

ここで、 (属性を に適用するように)table height(vertical only)の下部をつかんで のサイズを変更し、一度により多くのデータを表示できるようにします。tbodyresizetextarea

4

3 に答える 3

0

jquery を使用して実行する場合は、次のようにします。

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

また

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

2番目の方法は、高さを別のテーブルまたは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 に答える
0

少しCSSを使えばできると思いますが、とても簡単です。これは、tbody の垂直方向のサイズを変更する部分です。

<tbody id="tbody">たとえば、ID を tbody ( ) に追加します。CSS は次のとおりです。

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

または小さなもの。

#tbody {
height: 100px;
}

私はあなたを助けたことを願っています！

于 2015-05-27T10:42:42.990 に答える