如何设置layui默认的表格宽度

介绍

在 layui 框架中使用表格是非常常见的操作，然而默认情况下 layui 的表格是没有指定宽度的，这将会导致表格没有充分地利用页面的宽度。

第一种方式：设置CSS样式

通过设置 CSS 的方式来为表格设置宽度，这是最直接的方式。

  
    table.layui-table {
      width: 100%;
    }
    table.layui-table thead th {
      text-align: center;
    }
  

第二种方式：使用JavaScript来设置宽度

利用JavaScript的方式可以让宽度更具有动态性，比如可以根据窗口的大小来动态调整表格的宽度。

  
    layui.use(['table'], function () {
      var table = layui.table;

      //设置表格默认宽度为100%
      tableSetWidth();

      //监听窗口大小变化事件，动态调整表格宽度
      $(window).on('resize', function () {
        tableSetWidth();
      });

      //设置表格默认宽度
      function tableSetWidth() {
        $(".layui-table-view").css("width", "100%");
        table.resize();
      }
    });
  

第三种方式：使用表格属性来设置宽度

在 layui 中，还可以通过表格的属性来设置表格的宽度，但是需要注意的是使用该方法设置的表格宽度可能需要根据具体情况进行微调。

  
    

      
        
        
        
        
        
      
      

        

          
ID
          
名称
          
类型
          
描述
          
操作
        
      
      

        

          
10001
          
项目名称
          
企业级
          
好项目啊好项目啊好项目啊好项目啊好项目啊好项目啊好项目啊好项目啊好项目啊好项目啊好项目啊
          

            编辑
            删除
          
        
        

          
10002
          
项目名称
          
政府级
          
好项目啊好项目啊好项目啊好项目啊好项目啊好项目啊好项目啊好项目啊好项目啊好项目啊好项目啊
          

            编辑
            删除
          
        
      
    
  

结论

通过上述三种不同的方法来设置 layui 表格的宽度。CSS 的方式最为常见，而使用 JavaScript 来进行设置可以达到更加动态的效果。表格属性方式较为灵活，但需要更具体的调整才能够达到最优结果。