Question

我有一个包含的div。

具有固定标题poperty的表。我已经通过编写2个div来实现它第一个div包含一个只定义标题的表，下一个div包含一个包含所有数据的表。现在保持它对齐我给了它们一个固定的宽度

带有固定标头的表工作正常。

但现在问题是，我必须通过按钮点击事件缩小和扩展表格。检查我的以下代码是否有帮助。如果有另一种方法可以实现这一点，请建议。

<input type="button" value="click me" id="abc">

<div id="main-div">
   <div id="header">
     <table class="gradienttable">
       <thead>
         <tr>
             <th style="width:80px;">col 1</th>
             <th style="width:80px;">col 2</th>
             <th style="width:7px;"></th>
         </tr>
       </thead>
     </table>
    </div>
    <div id="data" style="overflow:auto;height:50px;width:200px;">
       <table class="gradienttable" >
         <tbody>
           <tr>
              <td style="width:80px;">data r1c1</td>
              <td style="width:80px;">data r1c2</td>
           </tr>
           <tr>
              <td style="width:80px;">data r2c1</td>
              <td style="width:80px;">data r2c2</td>
           </tr>
           <tr>
              <td style="width:80px;">data r3c1</td>
              <td style="width:80px;">data r3c2</td>
           </tr>
          </tbody>
       </table>
    </div>
</div>

上面的表是虚拟的，因为我有一大堆cols.But我基本上以同样的方式完成它。只有高度宽度会改变。

我的脚本不起作用：

$(this).ready(function() {
  $('#abc').click(function() {
     $('div#main-div').animate({width:"100px"});
   });
});

请用此帮助我解决问题。

提前完成。

Answer 1

您可以在slideToggle容器上使用main-div：

$('input#abc').on('click', function() {
    $('div#main-div').stop().slideToggle();
})

JSFiddle example

Answer 2

你可以使用jquery

$(function(){
    $("#abc").click(function(){
     $('#main').slideToggle('slow');
});
})

将id为main的div的可见性隐藏在css

中

Answer 3

您的代码在jsfiddle中有效。问题在于你的造型。

id为main-div的div未设置为隐藏溢出或显示滚动条（默认情况下，它只显示溢出该区域的内容）。

尝试在main-div上设置style =“overflow：auto”，然后运行代码。

<div id="main-div" style="overflow:auto">

通过jquery缩小表

3 个答案: