首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

CSS实现响应式表格

先看DEMO 自从转岗至腾讯云后,项目中接触到大量的数据表格。多列数据表格在空间有限的手机屏幕下,难以完美呈现,需要做响应式处理。本文介绍一种使用CSS实现响应式表格的方法。...通常表格中的一行代表一条项目,每列代表项目的一个属性方面(即字段)。...在屏幕空间充足的情况下,我们可以将表格的每列都完全显式在屏幕上,但在手机下,每列内容会拥挤不堪,甚至出现横向滚动条,用户快速了解每条项目基本情况的效率会大打折扣。 ? ?...一种优化方法是:使用media queries监测屏幕viewport小于568px时,让单元格(td)独占一行,每行(tr)相互隔离,如同每条项目为一独立的表格,如下图: ?...那么,隐藏掉表格的thead,单元格内容右对齐,在每个单元格前面插入对应的表头(th)即可解决这个问题,如下图: ?

2.1K20

JavaScript点击表格的表头,实现表格排序

现在很多vue/react等js框架配套的UI框架,表格自带点击表头排序的动能。 后来小想了js/jq 手写的话,逻辑上如何实现。就写了个小demo,这里共享下。 这是一个小白demo。.../jquery-2.0.3.min.js"> /** javaScript code....*/ 2)关于数据:数据就是个数组对象...具体的生成表格函数如下: function getbaseList(ary) { var html = ''; for (var i=0 ; i<ary.length...思路 因为表格数据是遍历数组动态创建,所以可以考虑在点击表头的时候,对数据进行排序。 对数据排序需要考虑两个关键点: 对哪个字段进行排序? 是正序(ASC)还是逆序(DESC)?...结语 自此就完成了一个简易版点击表头排序,详细代码详见 table-sort.html。 当然,这不是最简洁的方式,有看到小伙使用reverse()方法 JavaScript-点击表格的表头进行排序

3.8K10

Js排序算法_js 排序算法

它的时间复杂度也是 O(nlogn),但它在时间复杂度为 O(nlogn) 级的几种排序算法中,大多数情况下效率更高,所以快速排序的应用非常广泛。...注意: 快速排序不一定是最快的排序方法,这取决于需要排序的数据结构、数据量。不过,大多数情况下,面试官和工作场所用它的概率也是相对较高的,所以我们应该花时间把它学透彻。...复杂度: 快速排序的方法复杂度有时间复杂度和空间复杂度。 时间复杂度往往是决定一个算法优劣的最重要出发点,空间复杂度在当今的计算机上已经没有那么大的影响力了。...快速排序的一次划分算法从两头交替搜索,直到low和high重合,因此其时间 复杂度是O(n) ; 而整个快速排序算法的时间复杂度与划分的趟数有关。...这样,长度为n的数据表的快速排序需要经过n趟划分,使得整个排序算法的时间复杂度为O(n2)。 如果需要优化,那么我们希望每次区分的时候都取到中间数。

25.2K20

Doc文本迁移到Doc表格

获取表格数据:最开始的想法是把表格转成HTML,然后通过设定模板的方法将内容导入。但是各种工具转成的HTML都不尽人意,没样式、文字乱码。 然后发现两条路都堵死了,那不行啊。...那就开始处理表格模板。 我们先把想要的字段都用标识字符进行占位(切记使用完整且准确的英文,不然会自动切割字符) ? 有了模板以后,通过npm包adm-zip来直接解压表格模板数据。...*/g)[0].split(' ')[1] var time = body.split('三、教学时间')[1].split('四、教学过程')[0].replace('\n', '')...教学目标')[1].split('二、教学准备')[0].replace('\n', ''); var have = body.split('二、教学准备')[1].split('三、教学时间...index.docx 为表格模板 var zip = new admZip(`.

1.2K20

POI -java代码实现导出excel表格

JAVA集合中并且符号一定条件的数据以EXCEL 的形式输出到指定IO设备上           *            * @param title           *            表格标题名...            与输出设备关联的流对象,可以将EXCEL文档导出到本地文件或者网络中           * @param pattern           *            如果有时间数据...            // 声明一个工作薄               HSSFWorkbook workbook = new HSSFWorkbook();               // 生成一个表格...               HSSFSheet sheet = workbook.createSheet(title);               // 设置表格默认列宽度为15个字节               ...comment.setAuthor("leno");                      // 产生表格标题行               HSSFRow row = sheet.createRow

2.6K70

CSS时间轴列表

一.场景 需要实现时间轴列表,左边一串小圆点,右边是列表内容,需要小圆点位置与列表项对应,最终效果如下: timeline 二.实现方案 有几个细节: 小圆点要与列表项对齐 首项、末项的时间线不能超出小圆点...竖线的长度没有办法精确控制(不通过js计算的话),无法满足第二条,那么可以换个方式,让列表项自带同高度的竖线,拼接成完整的时间线 P.S.不用担心拼接出来的竖线会被看出来,一定是完美无缝的,否则浏览器不科学...-ch/2 + offsetY top 50%, marginTop -4 + 2 top 50%, marginTop -2 这是margin转padding套一层带来的麻烦 然后加上首项、末项的时间线不能超出小圆点的限制...fff; } 四.Demo 在线Demo:http://www.ayqy.net/temp/timeline/index.html 点击列表项高亮,列表项内容支持HTML和图片自适应 写在最后 最近在啃JS

2.8K21
领券