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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/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>

转载于:https://www.cnblogs.com/imihiroblog/archive/2012/07/19/2599279.html

HTML Table 固定列宽，实现excel表格效果相关推荐

access调整行高和列宽_《excel表格怎么调整行高和列宽》 EXCEL 表格如何导出至WORD 格式...
EXCEL 表格如何导出至WORD 格式 1.演示使用的软件为word文字处理软件,软件为office家学生版2016. 2.首先打开我档,并在上方栏找到插入菜单,单击后在工具栏中找到文本-对象. 3 ...
关于bootstrap table 固定列宽
首先为table 设置 style= " table-layout : fixed ; " <table id="assessStage" data- ...
html表格宽度拖拽,Js拖拽实现改变Table的列宽解决方案
Js拖拽实现改变Table的列宽如题,楼主是Js小白,最近遇到问题,需要用Js实现GridView的列拖拽改变大小,在网上找到一段代码如下: function MouseDownToResize(o ...
label居中_表格固定列宽时如何居中？
列宽固定居中的设置的时候,我们通常使用 p{宽度} 来指定固定的列宽,这时单元格会自动换行,换行之后是左对齐的,如何获得居中对齐呢? \begin{tabular}{|p{54pt}l|p{71pt} ...
【基础】固定列宽的表格及示例演示
引言对我来说,table 有一个非常有用,支持性也很好的 CSS 属性,但它却很少为人所知.它改变了表格的渲染方式,并生成一个更加稳定可靠的布局. 它就是: table {table-layout: ...
html制作固定列的表格,带固定列的简单HTML表格
我期望中间列的宽度是左右两列的3倍. 200(从左到右)的宽度看起来好像按照200,200,600的顺序指定宽度,而不是按照200,600,200的规定出现.换句话说,最后一列的宽度是前两个宽度的3倍 ...
Antd Table组件列宽的一些疑惑
前言前些年参与的几个项目,前端部分主要采用Vue+ElementUI进行开发.最近参与的项目,前端部分大胆的转向了React+Antd. 疑惑在之前的Vue+ElementUI项目里,Table组 ...
LaTeX 调整行距、列宽，以及表格的整体大小和字体大小
LaTeX 调整行距.列宽,以及表格的整体大小看到有很多小可爱在疑惑这个问题.稍微解答一下. 默认表格表格行距默认行距1 \begin{table}[h]\renewcommand{\array ...
html表格横向竖向滚动,利用纯css实现table固定列与表头中间横向滚动的思路和实例...
前言最近在做的后台管理系统要处理大量的表格,因为原项目是采用的for循环加拼接字符串的方式实现;导致js代码一大堆;各种单引号和双引号的嵌套;让人头疼;遂引入vue.js;用v-for做模板渲染;工 ...

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

HTML Table 固定列宽，实现excel表格效果相关推荐

最新文章

热门文章