静态表格背后的奥秘

静态表格是什么东东呢？为什么要用到静态表格呢？静态表格有什么用呢？table数据表格分静态和动态。一般大部分数据表格是动态的，动态表格也是常用的表格，俺们都知道，表格都是在为了存放数据和显示数据而存在的。当然，不管静态动态都有它们的优缺点。静态表格的数据是固定的，不会因为其他元素改变而改变。动态表格则相反，随时都可以加载你想要的数据啦。

上图为俺不依赖插件写的静态表格：固定显示日期跟金额数据，不会随着数据量增多而出现多条数据。那怎么制作的静态表格呢？在layui插件的魔掌下，静态表格的机制就是转化一段已有的表格元素，无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可。假设你的页面已经存在了一段有内容的表格，它由原始的table标签组成，这时你需要赋予它一些动态元素。然鹅，我做的并不是依赖layui,俺自己根据HTML的属性写的静态表格，代码量还算可以。请拭目以待：

上图为table数据表格，配置一些基础参数 ，写入数据接口等。Table数据表格既可以无限加载数据啦，超过表格长度之后就会自动分页折叠。这一切都在layui的掌控之中。Layui插件制作的表格非常简单，无需过多的写js及HTML代码。
重点来了，俺今天要说的是静态表格，就是第一张图的制作。
代码图在下面哦，请往下看呗。

俺解释一下吧，其实静态表格制作只是几个简单的标签而已，很简单的啦。首先捏，来个table标签定义表格，然后th标签定义表头，再来给tr定义表格行，td定义表格的单元，最后thead定义页眉，tbody定义主体。这样子，静态表格的框架就搭建好啦，然后给表格写入自己喜欢滴样式就欧克拉。加上边框，大小粗细可以自由设定，趋向于激情与视觉冲击的你一定会有满意的答案。
不知道大家有没有发现静态表格下面的滚动条，大家肯定有好奇是怎么做到的吧。其实也狠简单拉。就是在元素外面加两个属性，元素超出不换行，和x轴方向自动适应就可以拉。就是overflo-x：auto和white-space：nowrap。然后滚动条就出来的。
然后就完成拉。是不是很简单呢？那么你们试试吧。