Shulou(Shulou.com)06/03 Report--

This article mainly introduces whether the layui table supports self-adaptation, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Layui tables do not support adaptation. For example, when you add a data table to the page, you will find that the width of each column of the data table cannot adapt to the size of the table. After reading the official documents, you will find that you can set the column width for the table:

LayuiTable.render ({width: 710 tabSta',url:'# tabSta',url: "/ pickTicket/tytr", cols: [{field: "ShiftsID", title: "ID", hide: true}, {field: "scheduleCoding", title: "frequency", align: "center"}, {field: "time", title: "time", align: "center"}, {field: "carNumber", title: "vehicle number" Align: "center"}]],})

However, the problem arises. When I shrink the page, the width of the table is still the original width, can not meet the requirements of adaptive size. The reason is that the width I just set to it is a fixed width.

Since the above method does not work, then proceed to the second solution. I checked on the browser page and found that when the width is set to 100%, the width of the data table can be adaptively sized. So, add the parameter done to the corresponding code of the data table to customize a style for the data table.

The related code is as follows:

Tabrecord = layuiTable.render ({elem:'# tabStation',url: "/ pickTicket/tytr", done: function (res, curr, count) {KaTeX parse error: Expected 'EOF', got'}'at position 34: … Th "," 100% ");} cols: [[{fi … (" table ") .css (" width "," 100% ")

You can also write $("table") .width ("100%").

With this setting, we go back to the browser page to view, no matter how we zoom the page, the data table can adapt to the page size.

Thank you for reading this article carefully. I hope the article "does the layui form support self-adaptation" shared by the editor will be helpful to everyone? at the same time, I also hope that you will support it and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.