table自定義表格樣式
阿新 • • 發佈:2018-12-10
前言:
自定義表格樣式,有一些自定義的需求,整理成通用樣式就可以複用了
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>
效果