700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > HTML Table 固定列宽 实现excel表格效果

HTML Table 固定列宽 实现excel表格效果

时间:2022-11-27 04:24:25

相关推荐

HTML  Table  固定列宽 实现excel表格效果

(1)获取行号

<table><tr onmouseover ="showIndex(this)"><td>1</td></tr><tr onmouseover ="showIndex(this)"><td>2</td></tr><tr onmouseover ="showIndex(this)"><td>3</td></tr><tr onmouseover ="showIndex(this)"><td>4</td></tr></table>

function showIndex(pVal) {alert(pVal.rowIndex);}

(2)改变颜色、符号

/*在行上改变 图片*/for(var i=0;i<=pTable.rows.length-1;i++){var row=pTable.rows[i];row.onmouseover = function() {/*js this是事件的触发者*/this.style.backgroundColor="#ffff00";var tempDv = this.childNodes[0].childNodes[0];var currentY = parseInt(tempDv.style.backgroundPositionY.split('px')[0]);var newY = currentY - 30 + "px";tempDv.style.backgroundPositionY = newY;}row.onmouseout = function() {this.style.backgroundColor="#ffffff";var tempDv = this.childNodes[0].childNodes[0];var currentY = parseInt(tempDv.style.backgroundPositionY.split('px')[0]);var newY = currentY + 30 + "px";tempDv.style.backgroundPositionY = newY;}}

(3)excel表格效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title></title><style type="text/css" >table{border-collapse:collapse;}/*table消除行间距的技巧*/#tb1 td{border:1px solid #000000;}/*td和colgroup无法限制cell的宽度.只要内容超过设定值,单元格会被撑开*//**************************/#tb2 td{border:1px solid #000000;}#tb2 td span{border-right:1px solid #000000;}/*每行1td,行内用span来控制单元格宽度. */.span1{width:33px; height:20px; overflow:hidden;}/*失败原因:span是行内元素 宽高属性无效*/.span2{width:48px;height:20px; overflow:hidden;}/*如果将文本直接放在td内,对控制td的wh和overflow,内容过长一样会撑开*//************************/#tb3 td{border:1px solid #000000;}/*可行方案每行1td,td内使用p,即可控制列宽*/#tb3 p{float:left; margin:0px; padding:0px; border-right:solid 1px #000000}</style></head><body><table id="tb1"><tr><td>姓名</td><td>身份证</td></tr><tr><td class ="span1">111312321312</td><td class ="span2">222312312</td></tr><!--文本在td内,直接控制td的width,overflow.当文本超长,td会被撑开--><tr><td class ="span1">1113213213121</td><td class ="span2">222312312</td></tr></table><div style="height:20px"></div><table id="tb2"><tr><td><span>姓名</span><span>身份证</span></td></tr><tr><td><span class="span1">111</span><span class="span2">222</span></td></tr><tr><td><span class="span1">111</span><span class="span2">222</span></td></tr></table><div style="height:20px"></div><table id="tb3"><tr><td><p>姓名</p><p>身份证</p></td></tr><tr><td><p class="span1">111</p><p class="span2">222</p></td></tr><tr><td><p class="span1">111</p><p class="span2">222</p></td></tr></table></body></html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。