layui使用table组件实现排序的CSS样式调整解决方案

简介: layui使用table组件实现排序的CSS样式调整解决方案

外部文件引入

  <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="common.css">


table引入

    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#test'
            , url: 'user.json'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
            , cols: [[
                {field: 'id', width: 80, title: 'ID', sort: true}
                , {field: 'sex', width: 80, title: '性别', sort: true}
                , {field: 'experience', title: '积分', sort: true}
                , {field: 'score', title: '评分', sort: true}
                , {field: 'wealth', width: 137, title: '财富', sort: true}
            ]]
        });
    });


common.css

body {
    background-color: #111633;
    color: #fff;
}
/*边框宽度*/
.layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] {
    border: 0px;
    cursor: pointer;
}
.layui-table tbody tr:hover, .layui-table thead tr, .layui-table-click, .layui-table-header, .layui-table-hover {
    background-color: transparent;
    cursor: pointer;
    color: #FFF !important;
    font-weight: bold !important;
    border-bottom: 1px solid #272b4e;
}
.layui-table > thead > tr {
    background: transparent;
}
/*表头样式*/
.layui-table-header > .layui-table td {
    font-weight: bold;
}
/*设置表格单元格线样式*/
.layui-table {
    background: transparent;
}
.layui-table td, .layui-table th {
    border-color: transparent; /*#bbb*/
}
.layui-table tr {
    color: #FFF;
    border-bottom: 1px solid #272b4e;
}
.layui-table tr:first-child {
    color: #d14043;
}
.layui-table tr:nth-child(2) {
    color: #d9a56b;
}
.layui-table tr:nth-child(3) {
    color: #44e097;
}


lockdatav Done!

相关文章
|
7天前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
17天前
|
前端开发 UED
CSS3:linear-gradient&input&inset&table
本文介绍了 CSS 中的 `linear-gradient` 渐变、`input` 样式、`inset` 简写属性、`border-collapse: collapse` 表格边框合并以及 `&lt;label&gt;` 元素的 `for` 属性。通过示例代码和解释,帮助读者理解这些 CSS 特性及其应用。
39 13
|
13天前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
79 1
|
20天前
|
数据可视化 前端开发 搜索推荐
FLEX组件可视化设计器CSS3代码生成器
FLEX组件可视化设计器CSS3代码生成器
19 4
|
22天前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
33 2
|
1天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
|
1天前
|
前端开发
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。
|
20天前
|
数据可视化 前端开发 数据安全/隐私保护
DIY可视化快速组件CSS样式设计生成源码
DIY可视化快速组件CSS样式设计生成源码
23 0
|
3月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果