表格的展开和收起技术分享

开发工具与关键技术DW，CSS，JavaScript
作者：陈梅
撰写时间：2019年2月5日
表格的展开。收起的样式很简单，用的技术工具也就是CSS和JavaScript两个，掌握好CSS布局，JavaScript技术就可以了。下面我们来看看表格的页面布局，源代码的样式吧！


源代码的样式很简单，给它盒子，再用table表格样式来布局，再用tr，td列好表格的内容。再另外用个盒子，设计展开、收起按钮的。
下面我们再看看CSS的样式布局吧！


CSS的样式布局也十分简单。运用通配符，设计全部的字体、内边距和外边距。再设计每个盒子的样式和各个需要的布局。在这CSS样式中，大部分样式我们都学过，在这我只说说两三个样式。text-align:是元素之间水平对齐的一种属性，在这用于文字水平居中的效果。box-shadow是向盒子边框添加阴影。Overflow用hidden就是超出元素的部分内容隐藏起来。Transition为CSS3样式，在之前发布CSS3文献中就有说过，控制动画的效果和动画事件。还有一个样式就是隐藏收起的样式，就是display啦！
下面我们来看看JavaScript的样式吧！

JavaScript的样式也很简单，申明展开、收起的变量。这展开、收起的JavaScript技术，就是鼠标的点击事件，如果属性鼠标点击事件的同学，应该可以理解得了这个JavaScript的样式。设计展开时的高度，点击展开时，收起样式就失效。再设计一下收起时的高度，点击收起时，展开的样式就失效。收起时就会变成100px的高度，这样一个展开、收起的表格就做好了。
下面我们看看效果如何：

点击展开按钮，内容就会展开出来。再点击收起按钮，内容就会收起来。表格展开、收起技术就分享到这里啦！