效果图

代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>Sort table example</title>

    <style>

        body {

            font-size: 14px;

            margin: 50px 30px;

        }

        table {

            border: 2px solid #42b983;

            border-radius: 5px;

            background-color: #fff;

        }

        th {

            background-color: #42b983;

            color: rgba(255,255,255,0.66);

            cursor: pointer;

        }

        td {

            background-color: #f9f9f9;

        }

        th, td {

            min-width: 90px;

            padding: 10px 10px;

        }

        .arrow {

            display: inline-block;

            vertical-align: middle;

            width: 0;

            height: 0;

            margin-left: 5px;

            opacity: 0.66;

        }

            .arrow.asc {

                border-left: 4px solid transparent;

                border-right: 4px solid transparent;

                border-bottom: 4px solid #fff;

            }

            .arrow.dsc {

                border-left: 4px solid transparent;

                border-right: 4px solid transparent;

                border-top: 4px solid #fff;

            }

    </style>

</head>

<body>

    <table>

        <thead>

            <tr>

                <th>Name<span class="arrow asc"></span></th>

                <th>Score<span class="arrow dsc"></span></th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>

                    Li Lei

                </td>

                <td>

                    100

                </td>

            </tr>

            <tr>

                <td>

                    Han Meimei

                </td>

                <td>

                    99

                </td>

            </tr>

        </tbody>

    </table>

</body>

</html>

版权声明：本文为CSDN博主「门关」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/dengsi19361/article/details/70313132

HTML table表头排序箭头绘制法【不用箭头图片】的更多相关文章

  1. javascript: 带分组数据的Table表头排序

    如下图: 要求:点击表头排序时,"分组"及"分组明细"的数据层次关系不变 从网上找了一段常规的table排序,改了改,以满足“分组支持”,贴在这里备份 < ...

  2. ElementUI - Table 表头排序

    ElementUI - Table 表头自带排序功能,和排序事件,但是目前只是对当前界面的数据进行排序. 项目需求: 点击表头排序的时候,对所有数据进行排序. 初步方案: 在点击排序按钮的时,在排序事 ...

  3. CSS绘制三角形和箭头，不用再用图片了

    前言 还在用图片制作箭头,三角形,那就太lou了.css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题. 先来看看这段代码: /**css*/.d1{ width: 0; he ...

  4. QRowTable表格控件(五)-重写表头排序、支持第三次单击恢复默认排序

    目录 一.原生表格 二.效果展示 三.实现方式 1.排序列定制 2.排序交互修改 四.相关文章 原文链接:QRowTable表格控件(五)-重写表头排序.支持第三次单击恢复默认排序 一.原生表格 开发 ...

  5. table表头固定问题

    table表头固定问题 原生的table表头在表格滚动时候无法固定,可以使用以下的方法进行模拟 1. 双table法 表头和表体各用一个table,这样会产生表格列对不齐的问题,可以使用colgrou ...

  6. CList 点击表头排序 （2）两种排序方法中其中一种

    上一篇讲解SortItem()方法如何使用,虽然都是抄别人的但是就是想让大家有个大概的了解 CList 点击表头排序 (1)SortItems函数 点击表头排序基本思路都是 1.首先响应HDN_ITE ...

  7. Lua table.sort排序

    在用table.sort 排序的时候注意,如果使用多个条件排序,应在一个排序函数里按照条件优先级进行比较排序. 例如 local t = { {time = , i = }, {time = , i ...

  8. Lua的 table.sort排序

    在用table.sort 排序的时候注意,如果使用多个条件排序,应在一个排序函数里按照条件优先级进行比较排序. 例如 local t = { {time = , i = }, {time = , i ...

  9. table 表头固定 thead固定. 1) 使用jquery.freezeheader.js

    方法一: 使用jquery.freezeheader.js 固定表头: 1-: 初始化: <!DOCTYPE html> <html lang="en"> ...

随机推荐

  1. 题解 P4568 【[JLOI2011]飞行路线】

    P4568 [JLOI2011]飞行路线 分层图模板题,相似的题还有P4822 [BJWC2012]冻结,P2939 [USACO09FEB]改造路Revamping Trails,其实做惯了也就不难 ...

  2. Centos7 ISCSI配置 完全攻略

    Centos7 ISCSI配置 完全攻略 一. iscsi简单介绍 iSCSI( Internet Small Computer System Interface 互联网小型计算机系统接口) iscs ...

  3. PHP+Mysql防止SQL注入的方法

    这篇文章介绍的内容是关于PHP+Mysql防止SQL注入的方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 方法一: mysql_real_escape_string -- 转义 S ...

  4. Springmvc-crud-06（路径忘记加上“/”错误）

    错误: 原因:自己马虎忘记加"  /  ",罚继续写代码┭┮﹏┭┮ 前端代码: <h1>添加功能</h1> <form action="te ...

  5. 移动端 vue + mintUI 实现头部页签切换，按需加载~

    记录~记录~~有时候,我们会遇到一个页面有两个页签切换需求,但是为了避免同时加载两个页面,我们要做到的就是当前进入的是那个页面,就先加载哪一个页面,并且也不会造成浏览器地址的变化.一开始我使用的方法是 ...

  6. 《实战Java高并发程序设计》读书笔记四

    第四章 锁的优化及注意事项 1.锁性能的几点建议 减小锁持有时间: 系统持有锁时间越长锁竞争程度就越激烈,只对需要同步的方法加锁,可以减小锁持有时间进而提高锁性能. 减少锁的持有时间有助于降低锁冲突的 ...

  7. 巨头环伺下，青云QingCloud的云计算之路危机重重

    编辑 | 于斌 出品 | 于见(mpyujian) 随着互联网.科技行业的深入发展,国内云计算市场正越来越爆发出惊人的潜力,大量大.中.小型玩家开始不断发力,涌现出了一大批增速明显的行业玩家. 以BA ...

  8. mysql错误问题处理

    问题1.mysql 黑窗口出现错误 无法启动此应用程序 ,计算机中丢失MSVCP120.DLL,请重新安装 因为是从虚拟机上安装的新的系统,所以dos窗口输入mysql -v的时候出现了上述的错误,之 ...

  9. C语言：假定输入的字符串只包含字母和*号，fun函数：除了尾部的*号以外，将字符的其他*号进行全部删除，形参p已经指向字符串中最后一个字母。-利用折半查找整数m在有序数组中的位置，若找到，返回下标值，否则返回-1。

    //假定输入的字符串只包含字母和*号,fun函数:除了尾部的*号以外,将字符的其他*号进行全部删除,形参p已经指向字符串中最后一个字母. #include <stdio.h> void f ...

  10. UCS内存问题排查

    UCS使用双列直插式内存模块(Dual In-line Memory Module (DIMM) )作为RAM模块. 根据文档介绍,主要有如下部分:1.Memory placement <内存放 ...