HTML table表头排序箭头绘制法【不用箭头图片】
效果图
代码
<!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表头排序箭头绘制法【不用箭头图片】的更多相关文章
- javascript: 带分组数据的Table表头排序
如下图: 要求:点击表头排序时,"分组"及"分组明细"的数据层次关系不变 从网上找了一段常规的table排序,改了改,以满足“分组支持”,贴在这里备份 < ...
- ElementUI - Table 表头排序
ElementUI - Table 表头自带排序功能,和排序事件,但是目前只是对当前界面的数据进行排序. 项目需求: 点击表头排序的时候,对所有数据进行排序. 初步方案: 在点击排序按钮的时,在排序事 ...
- CSS绘制三角形和箭头,不用再用图片了
前言 还在用图片制作箭头,三角形,那就太lou了.css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题. 先来看看这段代码: /**css*/.d1{ width: 0; he ...
- QRowTable表格控件(五)-重写表头排序、支持第三次单击恢复默认排序
目录 一.原生表格 二.效果展示 三.实现方式 1.排序列定制 2.排序交互修改 四.相关文章 原文链接:QRowTable表格控件(五)-重写表头排序.支持第三次单击恢复默认排序 一.原生表格 开发 ...
- table表头固定问题
table表头固定问题 原生的table表头在表格滚动时候无法固定,可以使用以下的方法进行模拟 1. 双table法 表头和表体各用一个table,这样会产生表格列对不齐的问题,可以使用colgrou ...
- CList 点击表头排序 (2)两种排序方法中其中一种
上一篇讲解SortItem()方法如何使用,虽然都是抄别人的但是就是想让大家有个大概的了解 CList 点击表头排序 (1)SortItems函数 点击表头排序基本思路都是 1.首先响应HDN_ITE ...
- Lua table.sort排序
在用table.sort 排序的时候注意,如果使用多个条件排序,应在一个排序函数里按照条件优先级进行比较排序. 例如 local t = { {time = , i = }, {time = , i ...
- Lua的 table.sort排序
在用table.sort 排序的时候注意,如果使用多个条件排序,应在一个排序函数里按照条件优先级进行比较排序. 例如 local t = { {time = , i = }, {time = , i ...
- table 表头固定 thead固定. 1) 使用jquery.freezeheader.js
方法一: 使用jquery.freezeheader.js 固定表头: 1-: 初始化: <!DOCTYPE html> <html lang="en"> ...
随机推荐
- XFire调用CXF参数为Null的问题
最近,领导分配了一个任务,做接口联调.情况是这样,对方客户升级了接口采用CXF,而我们还是用的XFire1.2.6,首先就遇到了这个问题:XFire调用CXF参数为Null的问题 . 在网上搜了一大堆 ...
- Springmvc-crud-06(路径忘记加上“/”错误)
错误: 原因:自己马虎忘记加" / ",罚继续写代码┭┮﹏┭┮ 前端代码: <h1>添加功能</h1> <form action="te ...
- php 加解密函数
PHP 加密解密函数: /** * 系统加密方法 * @param string $data 要加密的字符串 * @param string $key 加密密钥 * @param int $expir ...
- [踩坑记录] windows10 应用商店打不开 代码: 0x80131500
在某博客看到的方法,供参考,可以尝试一下,我的也是这么解决的1.打开“运行”输入 inetcpl.cpl (“WINDOWS”+“R”键,输入 inetcpl.cpl亦可)2.点开高级往下拉,勾上&q ...
- 2020 CCPC Wannafly Winter Camp Day1 - I. K小数查询(分块)
题目链接:K小数查询 题意:给你一个长度为$n$序列$A$,有$m$个操作,操作分为两种: 输入$x,y,c$,表示对$i\in[x,y] $,令$A_{i}=min(A_{i},c)$ 输入$x,y ...
- php与js的false类型
php除了下面列出来的情况是false 其余情况都可以看成true 包括NaN 和 空资源 整数 0 浮点数 0.0 空字符串 '' 或者'0' false 空数组 NULL类型 空标生成Simpl ...
- idea新建maven project工程
1.new project: 2.新建在main 下新建 java directory 并mark as source root,这里我已经makr过java目录所以以showfor做演示: 3.新 ...
- Fedora以root用户自动登陆
目录 Fedora以root用户自动登陆 参考 配置自动登陆 Fedora以root用户自动登陆 Fedora Workstation Version: 31
- ASP.NET Core搭建多层网站架构【8.2-使用AutoMapper映射实体对象】
2020/01/29, ASP.NET Core 3.1, VS2019, AutoMapper.Extensions.Microsoft.DependencyInjection 7.0.0 摘要:基 ...
- python学习之HTML
1.HTML初知 <!DOCTYPE html> <html lang="en"> <head> html头 <meta charset= ...