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

Bertha 。 2022-04-10 08:12 523阅读 0赞

(1)获取行号

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>
        <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>

![2012091313085365.png][]

[2012091313085365.png]: /images/20220401/5c5dfb3279fc4c4496598f2f1b1399db.png