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

html-css018

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

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

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

（1）1、js方法，这是一般网站常用的方法。

优点：兼容性好，易管理。

实现方式：按钮

onclick

触发

目标div

显示/隐藏。

代码有很多。

2、纯css方法：这是为了应付考试，掌握灵活性而用

缺点：需要支持css3的浏览器，兼容性不佳。

实现方法：利用css的伪类选择，将整个一体放到一个div中，包括

触发按钮、标题、内容。在div的css上写高度、overflow:hidden，在hover或active伪类上写新的高度即可，并不太实用。特意为你写的示例：

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style type="text/css">

#box { width:400pxheight:30pxborder:1px #666666 solidpadding:10pxoverflow:hidden}

#box h5{ border:1px #666666 solidheight:30pxmargin:0padding:0}

#box p{ border:1px #666666 solid}

#box:hover { height:100px}

</style>

</head>

<body>

<div id="box">

<h5>+ 标题</h5>

<p>这里是内容，也可以用 #box:active { height:100px}，这是鼠标按下的效果。</p>

</div>

</body>

</html>

（2）CSS是用级联样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。