layui table数据表格 数据过长自动换行和样式重写记录问题

原创
2023/05/17 17:36
阅读数 96

一、layui table 添加样式表【灰色表头】 
       .mytable{
        border:1px solid #CCCCCC;
        font-family:Arial, Helvetica, sans-serif,simsun;
        font-size:14px;
        border-collapse:collapse;
        padding:9px 15px;
        margin:10px;
        width:100%;
     }
    .mytable th{
      border:1px solid #CCCCCC;
      padding:9px 12px;
    }
    .mytable td{
      border:1px solid #CCCCCC;
      padding:9px 12px;
    }
    .mytable tr{
        border:1px solid #CCCCCC;
    }
    
    .mytable thead{background:#e5ebee;}    
    .padding5{padding:5px;}
    .margin-top5{margin-top:5px;}
    

   二、layui 数据表格复选框不居中问题  
.layui-table-cell .layui-form-checkbox[lay-skin="primary"]{   
    transform: translateY(-12%);//核心属性
    height: auto !important;
    line-height: normal !important;
    border: none !important;
    min-height: 14px !important;; 
}

 

 三、layui-card-header白色表头
.layui-card-header {
    position: relative;
/*     overflow: visible;
 */    height: 34px;
    line-height: 34px;
    background:#FFFFFF;
    padding: 0 5px;
    border: 1px solid #f8f9f8;
     color: #333; 
    border-radius: 2px 2px 0 0;
    font-size: 14px;
    background:#F6F6F6;*/

四、layui-card-header灰色表头

.layui-card-header-huise {
    position: relative;
/*     overflow: visible;
 */    height: 34px;
    line-height: 34px;
    background:#F6F6F6;
    padding: 0 5px;
    border: 1px solid #f8f9f8;
     color: #333; 
    border-radius: 2px 2px 0 0;
    font-size: 14px;    

五、layui数据表格数据过长自动换行问题

 .layui-table-cell {
       family-name:'微软雅黑';
       font-size:12px;
       height:auto; 
       width: auto;
        font-weight: bold; 
       line-height: 16px;
       min-height: 16px;
       overflow:visible;
       text-overflow:inherit;
/*     white-space:normal;
       white-space:pre-line;
 */    white-space:normal;
       word-break: break-all;
       word-wrap:break-word;     
       
    }

 

          done:function(res,curr,count){
                                
                                       //解决操作栏因为内容过多换行问题
                                  $(".layui-table-main tr").each(function (index, val) {
                                      $($(".layui-table-fixed-l .layui-table-body tbody tr")[index]).height($(val).height());
                                      $($(".layui-table-fixed-r .layui-table-body tbody tr")[index]).height($(val).height());
                                  });
              },

 

 


 六、layui数据表格表头问题
  .layui-table-cell .layui-table td, .layui-table th {
    position: relative;
    padding: 5px 12px;
    min-height: 16px;
    line-height: 16px;
    font-size: 14px
}
    
.layui-table td, .layui-table th {
    position: relative;
    padding: 5px 12px;
    min-height: 16px;
    line-height: 16px;
    font-size: 14px
}

.layui-table[lay-skin=line] td, .layui-table[lay-skin=line] th {
    border-width: 0 0 1px
}

.layui-table[lay-skin=row] td, .layui-table[lay-skin=row] th {
    border-width: 0 1px 0 0
}

.layui-table[lay-skin=nob] td, .layui-table[lay-skin=nob] th {
    border: none;
    padding: 5px 10px;
}

 

 

 

 

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部