创新实训-layui表格不显示滚动条|网页元素不随着网页的缩放而错位，自适应

创新实训-layui表格不显示滚动条|网页元素不随着网页的缩放而错位

一.layui表格不显示滚动条
因为首页中有一个页面是用layui表格做的，如果返回的数据过长，默认会将多余的隐藏，显示…，并出现滚动条，这种显示方式并不适当，因此要将滚动条隐藏。
CSS中overflow属性是控制内容溢出的，值为visible则不进行修剪，内容会超出；值为hidden则进行修剪，其余内容不显示。因此将layui.css中的相关设置进行修改。一开始直接修改.css中的内容，但是这种方式会影响其他成员的页面显示，所以最后在自己页面中进行修改。网上搜索提示将.layui-table-grid .layui-table-cell 中的overflow进行修改，但是修改后还是出现了滚动条，经过不断的测试发现需要下面三行代码才能实现滚动条的隐藏。

$(\'.layui-table-grid .layui-table-cell\').css({\'overflow\'\'hidden\'});$(\'.layui-table-fixed-r .layui-table-header\').css({\'overflow\'\'hidden\'});$(\'.layui-table-body\').css({\'overflow\'\'hidden\'});

二.网页元素不随着网页的缩放而错位
总的来说，原则就是能用百分比，就不用固定值
1.bootstrap栅格系统自适应
用flex进行布局的网页在缩放后并没有出现错位，用bootstrap栅格系统进行布局的出现了错位。这是因为在设置时只考虑到了自己的情况，只用了col-md- ，没有考虑到其他屏幕大小的情况，所以需要添加col-xs- col-sm- ，用以适应手机屏幕大小与平板屏幕大小。

<div class=\"left col-md-11 col-xs-11 col-sm-11\">

如果用到了列偏移，也是用这种方法

<div  class=\"col-md-2 col-md-offset-10 col-xs-4 col-xs-offset-8 col-sm-3 col-sm-offset-9\">

2.背景图片自适应-设为cover

.features{background:url(../img/jobInfobg.jpg);/*background-size:140%*//*margin:2em*/background-size: cover;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;}

3.layui表格中的数据自适应
将列的宽度设置为百分比，如100%

,cols: [[{field:\'title\', width:\'100%\'},]],

4.普通图片自适应
设置宽度与高度为百分比

<img alt=\"\" src=\"/extrasert2/img/topic1.png\" width=100% height=70% >

5.将显示内容的div都设为自动换行

word-wrap:break-word;word-break:break-all;

6.图标大小可以不用百分比，直接用多少px就可
改之前
改之后