在ie中行大小好像有点问题 ，主要作借鉴作用 <html><head><script type="text/javascript" src="jquery-1.8.3.min.js"></script
在ie中行大小好像有点问题 ，主要作借鉴作用
<html><head><script type="text/javascript" src="jquery-1.8.3.min.js"></script><script>$(function(){ //获取滚动条的宽度 var scrollWidth = $('.trclass')[0].offsetWidth-$('.trclass')[0].scrollWidth; //获取表内容的宽度 var trwidth = $('.trclass')[0].scrollWidth; //去除滚动条之后内容的实际宽度 var tdwidth = $('.trclass')[0].scrollWidth-scrollWidth; $('tr').width(trwidth); //获取表中行列数 var trLength = $('.trclass tr').length; for(var i=0; i<trLength;i++){ var tdl = Number($('.trclass tr').eq(i).css('width').replace(/[^0-9]/ig,"")); //获取每一行列数目 var tdLength = Number($('.trclass tr').eq(i).children('td').length); var tdcount=0; var trHeight = 0; //获取行width总和 //获取列的最大的height像素值 for(var j=0;j<tdLength;j++){ var tdthis = Number($('.trclass tr').eq(i).children('td').eq(j).prop('width')); tdcount += tdthis; var thisHeight = Number($('.trclass tr').eq(i).children('td').eq(j).css('height').replace(/[^0-9]/ig,"")); trHeight = trHeight>thisHeight?trHeight:thisHeight; } //每列赋予最大height像素值 for(var n=0;n<tdLength;n++ ){ tdthis = Number($('.trclass tr').eq(i).children('td').eq(n).prop('width')); $('.trclass tr').eq(i).children('td').eq(n).css('width',tdwidth*(tdthis/tdcount)); //若表头换行参照列行为 $('.thclass th').eq(n).width($('.trclass tr').eq(i).children('td').eq(n).width()); //var padHeight = Number($('.trclass tr').eq(i).children('td').eq(n).css('padding').replace(/[^0-9]/ig,"")); //var borderHeight = Number($('.trclass tr').eq(i).children('td').eq(n).css('border-top-width').replace(/[^0-9]/ig,"")); //$('.trclass tr').eq(i).children('td').eq(n).attr('height',trHeight); } } //重写行表格高度 for(var m=0;m<trLength;m++){ //获取每一行列数目 var tdLengths = Number($('.trclass tr').eq(m).children('td').length); var trHeights = 0; //获取列的最大的height像素值 for(var js=0;js<tdLengths;js++){ var thisHeights = Number($('.trclass tr').eq(m).children('td').eq(js).css('height').replace(/[^0-9]/ig,"")); trHeights = trHeights>thisHeights?trHeights:thisHeights; } //每列赋予最大height像素值 for(var ns=0;ns<tdLengths;ns++ ){ //var padHeights = Number($('.trclass tr').eq(m).children('td').eq(ns).css('padding').replace(/[^0-9]/ig,"")); //var borderHeights = Number($('.trclass tr').eq(i).children('td').eq(ns).css('border-top-width').replace(/[^0-9]/ig,"")); $('.trclass tr').eq(m).children('td').eq(ns).attr('height',trHeights); } } });</script><style>th,td{display:block;float:left;text-align:center;vertical-align: middle;}tr{display:block;width:100%;vertical-align: middle;}</style></head><body style="margin:0 auto;text-align:center;vertical-align: middle;"> <div > <table border="1px" align=center style="width:80%;text-align:center;"> <tbody class="thclass"> <th>标题1</th><th>标题2</th><th>标题3</th><th>标题4</th> </tbody> <tbody class="trclass" style="display:block;width:100%;height:200px;overflow: auto;"> <tr><td width="15">第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行</td><td width="25">第一行</td><td width="20">第一行</td><td width="40">第一行</td></tr> <tr><td width="15">第2行</td><td width="25">第2行第2行第2行第2行第2行第2行第2行第2行</td><td width="20">第2行</td><td width="40">第2行</td></tr> <tr><td width="15">第3行</td><td width="25">第3行</td><td width="20">第3行</td><td width="40">第3行</td></tr> <tr><td width="15">第4行</td><td width="25">第4行</td><td width="20">第4行</td><td width="40">第4行</td></tr> <tr><td width="15">第5行</td><td width="25">第5行</td><td width="20">第5行</td><td width="40">第5行</td></tr> <tr><td width="15">第6行</td><td width="25">第6行第6行第6行第6行第6行第6行第6行第6行第6行第6行第6行第6行第6行</td><td width="20">第6行</td><td width="40">第6行</td></tr> <tr><td width="15">第7行</td><td width="25">第7行</td><td width="20">第7行</td><td width="40">第7行</td></tr> <tr><td width="15">第7行</td><td width="25">第7行</td><td width="20">第7行</td><td width="40">第7行</td></tr> <tr><td width="15">第7行</td><td width="25">第7行</td><td width="20">第7行</td><td width="40">第7行</td></tr> <tr><td width="15">第7行</td><td width="25">第7行</td><td width="20">第7行</td><td width="40">第7行</td></tr> <tr><td width="15">第7行</td><td width="25">第7行</td><td width="20">第7行</td><td width="40">第7行</td></tr> <tr><td width="15">第7行</td><td width="25">第7行</td><td width="20">第7行</td><td width="40">第7行</td></tr> </tbody> </table> </div></body></html>
