怎样通过css样式显示和隐藏表格

html-css011

怎样通过css样式显示和隐藏表格,第1张

CSS中显示和隐藏有多种方法,比较常见的是有display:none|blockvisibility: hidden|visible他们的区别在于,对文档流影响的区别。一般大家显示隐藏元素,比较倾向于用display。

你如果想隐藏表格,可以用table{display:none}来操作。想显示的话把display:block即可。

这个有好几种方式的

一种就是控制大框架的高度,超出隐藏,然后Js是控制点击显示的时候高度自适应,

点击隐藏的时候高度为设置的高度。

大致写下jquery吧 看下应该不难

<ul>

<li>第一行</li>

<li>第二行</li>

<li>第三行</li>

<li>第四行</li>

<li>第五行</li>

</ul>

<input type="button" value="显示"><input type="button" value="隐藏">

第一种

<script type="text/javascript">

$('input[val="隐藏"]').click(function(){

$('li:first').show().siblings('li').hide()

})

$('input[val="显示"]').click(function(){

$('li').show()

})

</script>

第二种

<script type="text/javascript">

$('input[val="隐藏"]').click(function(){

$('ul').css({height:'20px',overflow:'hidden'})

})

$('input[val="显示"]').click(function(){

$('ul').css({height:'auto',overflow:'hidden'})

})

</script>

第三种

<script type="text/javascript">

$('li:first').after('</ul><ul class="ul1">')

$('input[val="隐藏"]').click(function(){

$('ul.ul1').hide()

})

$('input[val="显示"]').click(function(){

$('ul.ul1').show()

})

</script>

简单的方法,具体怎么用还得看具体情况。