layui表格适配手机端
时间: 2023-09-05 22:09:33 浏览: 618
layui.mobile.css
要让layui表格适配手机端,可以使用layui的响应式布局。具体做法如下:
1. 在HTML页面中,将表格的容器元素(比如div)添加一个class="layui-hide-xs",表示在手机端隐藏这个容器。
2. 在CSS中,为手机端添加一个新的样式规则,比如:
@media screen and (max-width: 768px) {
.layui-hide-xs {
display: block !important;
}
}
这个样式规则表示在宽度小于768像素的屏幕上,显示class="layui-hide-xs"的元素。
3. 在JavaScript中,初始化表格时,添加一个配置项:
var table = layui.table;
table.render({
elem: '#table',
// 其他配置项...
mobile: true // 开启响应式布局
});
这个配置项表示开启响应式布局,让表格自适应手机屏幕。
这样,当用户在手机上访问页面时,就能看到适配手机屏幕的表格了。
阅读全文