日期:2014-05-17  浏览次数:20578 次

上下两表格各列对其问题
由于下边表格出现滚动条,导致上下各列不能对其了。怎么让这个两个表格各列对其?

PHP code

<div height="23px" style="overflow: hidden;">
<table border="1px" cellpadding="0" cellspacing="0"   width="98.5%">
<tbody>
  <tr class="tr" align="center" cols="5">
  <td width="20%">姓名</td>
  <td width="20%">性别</td>
  <td width="20%">民族</td>
  <td width="20%">号码</td>
  <td width="20%">操作</td>
  </tr>
</tbody>
</table>

</div>

<div  style="overflow: auto;height:230px;" >
<table border="1px" cellpadding="0" cellspacing="0"   width="100%">
<tbody>
  <?php
      $sql="select * from `test`";
      $sqln=mysql_query($sql);
      while($row = mysql_fetch_array($sqln)){
  ?>
  <tr class="tr1" align="center" cols="5">
  <td width="20%"><?php echo $row[name];?></td>
  <td width="20%"><?php echo $row[sex];?></td>
  <td width="20%"><?php echo $row[nation];?></td>
  <td width="20%"><?php echo $row[number];?></td>
  <td width="20%">操作</td>
  </tr>
  <?php
      }

  ?>
</tbody>
</table>
</div>



------解决方案--------------------
你这个好像是设置td的宽度等于滚动条宽度.

用下面的代码试试, 可能不用用于所有浏览器, 兼容性问题.

<script type="text/javascript">
window.onload=risehead;
window.onresize=risehead;
function risehead(){
var th=document.getElementsByTagName("table")[0];
var tc=document.getElementsByTagName("table")[1];
th.width=tc.clientWidth;
}
</script>