<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.tb td{border:solid 1px black;}
.tb th{border:solid 1px black;}
.tbdiv{overflow: hidden}
</style>
<script type="text/javascript">
function inittable(id){
var tablehead=document.getElementById(id+'_head');
var tablebody=document.getElementById(id+'_body');
for(var i=0;i<tablehead.rows[0].cells.length;i++){
tablebody.rows[0].cells[i].style.width=(tablehead.rows[0].cells[i].offsetWidth-2)+'px';
tablebody.rows[0].cells[i].childNodes[0].style.width=(tablehead.rows[0].cells[i].scrollWidth-2)+'px';
}
}
</script>
<title>Insert title here</title>
</head>
<body>
<div>
<table id="table1_head" width="300px" cellpadding= "0 " cellspacing= "0 " class="tb">
<tr>
<th style="width: 30px">1</th><th>2</th><th >3</th><th >4</th>
</tr>
</table>
<div style="overflow-y:auto ; height:100px; width:317px " >
<table id="table1_body" width="300px" cellpadding= "0 " cellspacing= "0 " class="tb">
<tr>
<td><div class="tbdiv" >1</div></td>
<td><div class="tbdiv" title="此行会超出界限 撑开div 如果是一般的td在火狐中会出现和头部不对齐的情况" >tttttttttttttttttt</div></td>
<td><div class="tbdiv" >3</div></td>
<td><div class="tbdiv" >4</div></td>
</tr>
<tr>
<td><div class="tbdiv" >1</div></td>
<td><div class="tbdiv" >2</div></td>
<td><div class="tbdiv" >3</div></td>
<td><div class="tbdiv" >4</div></td>
</tr>
<tr>
<td><div class="tbdiv" >1</div></td>
<td><div class="tbdiv" >2</div></td>
<td><div class="tbdiv" >3</div></td>
<td><div class="tbdiv" >4</div></td>
</tr>
<tr>
<td><div class="tbdiv" >1</div></td>
<td><div class="tbdiv" >2</div></td>
<td><div class="tbdiv" >3</div></td>
<td><div class="tbdiv" >4</div></td>
</tr>
<tr>
<td><div class="tbdiv" >1</div></td>
<td><div class="tbdiv" >2</div></td>
<td><div class="tbdiv" >3</div></td>
<td><div class="tbdiv" >4</div></td>
</tr>
<tr>
<td><div class="tbdiv" >1</div></td>
<td><div class="tbdiv" >2</div></td>
<td><div class="tbdiv" >3</div></td>
<td><div class="tbdiv" >4</div></td>
</tr>
</table>
<script type="text/javascript">
inittable('table1');
</script>
</div>
</div>
</body>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.tb td{border:solid 1px black;}
.tb th{border:solid 1px black;}
.tbdiv{overflow: hidden}
</style>
<script type="text/javascript">
function inittable(id){
var tablehead=document.getElementById(id+'_head');
var tablebody=document.getElementById(id+'_body');
for(var i=0;i<tablehead.rows[0].cells.length;i++){
tablebody.rows[0].cells[i].style.width=(tablehead.rows[0].cells[i].offsetWidth-2)+'px';
tablebody.rows[0].cells[i].childNodes[0].style.width=(tablehead.rows[0].cells[i].scrollWidth-2)+'px';
}
}
</script>
<title>Insert title here</title>
</head>
<body>
<div>
<table id="table1_head" width="300px" cellpadding= "0 " cellspacing= "0 " class="tb">
<tr>
<th style="width: 30px">1</th><th>2</th><th >3</th><th >4</th>
</tr>
</table>
<div style="overflow-y:auto ; height:100px; width:317px " >
<table id="table1_body" width="300px" cellpadding= "0 " cellspacing= "0 " class="tb">
<tr>
<td><div class="tbdiv" >1</div></td>
<td><div class="tbdiv" title="此行会超出界限 撑开div 如果是一般的td在火狐中会出现和头部不对齐的情况" >tttttttttttttttttt</div></td>
<td><div class="tbdiv" >3</div></td>
<td><div class="tbdiv" >4</div></td>
</tr>
<tr>
<td><div class="tbdiv" >1</div></td>
<td><div class="tbdiv" >2</div></td>
<td><div class="tbdiv" >3</div></td>
<td><div class="tbdiv" >4</div></td>
</tr>
<tr>
<td><div class="tbdiv" >1</div></td>
<td><div class="tbdiv" >2</div></td>
<td><div class="tbdiv" >3</div></td>
<td><div class="tbdiv" >4</div></td>
</tr>
<tr>
<td><div class="tbdiv" >1</div></td>
<td><div class="tbdiv" >2</div></td>
<td><div class="tbdiv" >3</div></td>
<td><div class="tbdiv" >4</div></td>
</tr>
<tr>
<td><div class="tbdiv" >1</div></td>
<td><div class="tbdiv" >2</div></td>
<td><div class="tbdiv" >3</div></td>
<td><div class="tbdiv" >4</div></td>
</tr>
<tr>
<td><div class="tbdiv" >1</div></td>
<td><div class="tbdiv" >2</div></td>
<td><div class="tbdiv" >3</div></td>
<td><div class="tbdiv" >4</div></td>
</tr>
</table>
<script type="text/javascript">
inittable('table1');
</script>
</div>
</div>
</body>
</html>
注意事项:
如果是英文 会撑开div 这里只是对内容进行了隐藏 如果是中文 会自动换行