响应式做的表格

开发工具与关键技术：HTML、JS
作者：LJR
撰写时间：2019年 5 月 26 日

1. 在平常的网页中，做一些普通表格时，没用用到响应式时，游览器的高度一发生变化的时候整个样式都乱了，这些表格不是从数据库中查数据的，而是直接打上去的，对于新入门的程序员，要做一个具有响应式的的普通表格，该怎么办呢？
   不用怕，这其实是很简单的，下面的图片就是具有响应式的效果，根据显示屏幕的高度去自适应，效果更好。那么怎么才能实现这个效果呢？
   

2. 首先：引用bootstrap-4.1.3的bootstrap.min.css和bootstrap.bundle.js和layui的layui.css和layui.js的插件，在做响应式的时候，直接应用里面的方法会快很多的。

 第二：<div class="row"> <div class="col-12 m-2"> <table> 表格的内容</table></div></div>
  这句代码引用bootstrap中的类，col-12是可以从col-1~col-12自由选择的，选择到适应自己模块的分数。

第三：就是把表格的内容填入进去就可以了，下面就是表格的数据，table在这里就要引用layui的插件。只是替换上面的table的内容即可。两个colgroup元素为表格中的三列规定了不同的对齐方式和样式（注意第一个 colgroup元素横跨两列）。
这样一个具有响应式的表格就做出来了，这里我们需要熟悉bootstrap和layui的插件就可以了。

4. 在表格的数据中，某一条数据如果再点击的时候要跳转到另外一个页面，其实也很件单的，只需要在相对应的数据字段添加一个a标签，给a标签添加一个点击事件。在script中写入一个方法，方法中写入一个链接，最后把方法的名称写入点击事件里面，点击的时候调用这个方法，网页就会加载到相对应的路径的网页。
   

一个简单的表格的功能就这么实现了，其实我们需要什么功能也可以添加进去的，只是要熟悉bootstrap和layui插件，利用它们做出响应式，让我们的网页不会应显示区域变化而让网页的样式也发生变化就好了。