html表格自适应

偏执的太偏执、 2021-12-21 16:13 277阅读 0赞

<!DOCTYPE HTML> 
    <html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>table</title> 
    
    <style>
    .style1 {
        overflow: hidden;
    	overflow: hidden;
    	white-space:nowrap; 
    	text-overflow:ellipsis;
    }
    </style>
    
    </head> 
    <body> 
    <table id="tb_1" cellspacing="0" cellpadding="2" width="100%" border="1" style="table-layout:fixed;"> 
    <tbody>
    <tr>   
    <td class="style1">11111111111111111</td> 
    <td class="style1">试用时间</td>
    <td class="style1">转正时间</td>
    <td class="style1">性别</td>
    <td class="style1">姓名拼音</td> 
    <td class="style1">生日时间</td>
    <td class="style1">民族</td>
    <td class="style1">身高</td> 
    </tr> 
    <tr> 
    <td class="style1">2000001</td> 
    <td class="style1">1997-3-13</td>
    <td class="style1">1997-3-13</td>
    <td class="style1">1</td>
    <td class="style1">WZJ</td> 
    <td class="style1">1965-3-13</td>
    <td class="style1">汉</td>
    <td class="style1">171</td> 
    </tr> 
    <tr> 
    <td class="style1">2000045</td> 
    <td class="style1">2001-2-15</td>
    <td class="style1">2001-3-15</td>
    <td class="style1">0</td>
    <td class="style1">WY</td> 
    <td class="style1">1978-8-5</td>
    <td class="style1">汉</td>
    <td class="style1">162</td> 
    </tr> 
    <tr> 
    <td class="style1">2000046</td> 
    <td class="style1">2001-2-23</td>
    <td class="style1">2001-3-23</td>
    <td class="style1">0</td>
    <td class="style1">LQ</td> 
    <td class="style1">2001-2-23</td>
    <td class="style1">汉</td>
    <td class="style1">171</td> 
    </tr> 
    </tbody> 
    </table> 
    <script type="text/javascript"> 
    var tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题 
    var table = document.getElementById("tb_1"); 
    for (j = 0; j < table.rows[0].cells.length; j++) { 
    table.rows[0].cells[j].onmousedown = function () { 
    //记录单元格 
    tTD = this; 
    if (event.offsetX > tTD.offsetWidth - 10) { 
    tTD.mouseDown = true; 
    tTD.oldX = event.x; 
    tTD.oldWidth = tTD.offsetWidth; 
    } 
    //记录Table宽度 
    //table = tTD; while (table.tagName != ‘TABLE') table = table.parentElement; 
    //tTD.tableWidth = table.offsetWidth; 
    }; 
    table.rows[0].cells[j].onmouseup = function () { 
    //结束宽度调整 
    if (tTD == undefined) tTD = this; 
    tTD.mouseDown = false; 
    tTD.style.cursor = 'default'; 
    }; 
    table.rows[0].cells[j].onmousemove = function () { 
    //更改鼠标样式 
    if (event.offsetX > this.offsetWidth - 10) 
    this.style.cursor = 'col-resize'; 
    else 
    this.style.cursor = 'default'; 
    //取出暂存的Table Cell 
    if (tTD == undefined) tTD = this; 
    //调整宽度 
    if (tTD.mouseDown != null && tTD.mouseDown == true) { 
    tTD.style.cursor = 'default'; 
    if (tTD.oldWidth + (event.x - tTD.oldX)>0) 
    tTD.width = tTD.oldWidth + (event.x - tTD.oldX); 
    //调整列宽 
    tTD.style.width = tTD.width; 
    tTD.style.cursor = 'col-resize'; 
    //调整该列中的每个Cell 
    table = tTD; while (table.tagName != 'TABLE') table = table.parentElement; 
    for (j = 0; j < table.rows.length; j++) { 
    table.rows[j].cells[tTD.cellIndex].width = tTD.width; 
    } 
    //调整整个表 
    //table.width = tTD.tableWidth + (tTD.offsetWidth – tTD.oldWidth); 
    //table.style.width = table.width; 
    } 
    }; 
    } 
    </script> 
    </body> 
    </html>

转自：[tianjy0508][]

[tianjy0508]: https://blog.csdn.net/tianjy0508/article/details/84343693