table自定义表格样式

前言：

自定义表格样式，有一些自定义的需求，整理成通用样式就可以复用了

1，table表格每一列可以自定义宽度

2，table表格每一列中的每一项超出宽度不换行并显示省略号...

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8" /><style>.useclick {cursor: pointer;}.table {min-height: 290px;width: 100%;}.table .tr {line-height: 32px;}.table .thead .tr {background: #75B2C7;}.table .tbody .tr {background: rgba(0, 0, 0, .4);margin-top: 2px;}.table .tbody .tr:hover {background: rgba(0, 0, 0, .5);}.table p {display: inline-block;vertical-align: middle;color: #fff;height: 22px;text-align: center;line-height: 22px;border-right: 1px solid #A8CDDD;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;box-sizing: border-box;}.table p:last-child {border: 0;}</style></head><body><div class="tablebox"><div class="table table_index"><div class="thead"><div class="tr"></div></div><div class="tbody"><div class="tr"><p class="w0">sdh</p><p class="w1">男</p><p class="w2" title="超幸福哦超幸福哦超幸福哦">超幸福哦</p></div><div class="tr"><p class="w0">sdh</p><p class="w1">男</p><p class="w2">超幸福哦</p></div></div></div></div><script src="js/common/jquery.min.js"></script><script>var SDHF = SDHF || {};SDHF.showHead = function(theadarr, obj) { //显示表头var theadhtml = '';for(var i = 0, len = theadarr.length; i < len; i++) {theadhtml += '<p class="w' + i + '" title="' + theadarr[i] + '">' + theadarr[i] + '</p>';}$(obj).html(theadhtml);};SDHF.showW = function(warr) { //显示表格每一项宽度for(var i = 0, len = warr.length; i < len; i++) {$(".w" + i).css("width", warr[i] + '%');}};var shtml = '';for(var i=0,len=3;i<len;i++){shtml+='<div class="tr"><p class="w0">sdh</p><p class="w1" title="搬砖搬砖搬砖搬砖搬砖搬砖搬砖搬砖搬砖">搬砖搬砖搬砖搬砖搬砖搬砖搬砖搬砖搬砖</p><p class="w2">59</p></div>'}$(".table_index .tbody").html(shtml);var theadarr = ['姓名','专业','分数'];SDHF.showHead(theadarr, $(".table_index .thead .tr")); //显示表头var warr = [10,10,80];SDHF.showW(warr); //每列宽度</script></body></html>

效果

table自定义表格样式相关推荐

h5分页样式 css,【前端技术】Quasar Table: 自定义分页样式
说点什么一个管理端的系统,最常用的是数据表格及分页. 这里我记录一下使用QTable 数据表及QPagination组件来实现想要的数据表格及分页的过程. 可直接跳至文章末尾,看实现效果:传送门. ...
table自定义表格的封装
前言: 对原生的table进行封装,让他满足我们一行显示不同个的需求. 实现效果:如图所示,一行显示不同数量的内容实现代码: 1.封装的组件:custom_table.vue,源码看下面 (1)一 ...
Excel怎么自定义表格样式，设置每两行替换颜色
1.打开EXCEL,插入表格 2.展开表格样式 3.选中你喜欢的样式,右键复制 4.在这里可以修改表格样式,设置成你喜欢的点击确定后,你的新复制的表格样式就会出现在自定义里 5.应用表格样式就可以了
html5 自定义表格样式,自定义excel表格样式
虽然excel2007为我们提供了大量的表格套用样式,有部分同学感觉还是满足不了自己的需要,我们可以自定义excel表格样式,让我们的表格样式与众不同,具体操作步骤如下: 1.切换到[开始]选项卡,在 ...
table自定义滚动条样式
效果图: css代码: //table样式 .home_table{width: 90%;border-collapse: separate;border-spacing: 20px 10px;mar ...
微信小程序自定义表格样式
微信小程序中没有关于table组件的内容,所以如果在小程序中需要用到列表样式时,就可以通过flex布局利用view设置样式模仿table的样式 wxml: <view class="t ...
自动化办公之excel教程（3）：数据编辑操作，表格的美化操作，应用表格样式和单元格样式，制作报销汇总单
一.数据编辑操作 1.填充数据填充数据见上一节自动化办公之EXCEL教程(2):各种数据的输入,自动填充数据,表格操作小技巧 2.查找和替换数据第一步:开始选项卡里找到查找或者Ctil+F 第 ...
巧用模板变换多维分析表格样式
自定义表格样式多维分析展现报表时,润乾报表提供了一套默认的表格样式,统一的表格样式可以使业务人员减少报表美化的工作量.然而默认的样式不可能迎合所有用户的审美,为此润乾提供了自定义表格样式的功能,供用 ...
Bootstrap表格样式使用方法
基本Bootstrap表格样式 Bootstrap最基本的表格样式就是在<table>标签中加入table类,然后在标签内嵌套thead和tbody元素即可. 例如:<table c ...

table自定义表格样式

table自定义表格样式相关推荐

最新文章

热门文章