表格固定行列可滚动

2021-03-15  

摘自网络 

<html>
<head>
<title>表格固定行列可滚动</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
  
	  <table width="240" height="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#666666">
	   <colgroup>
	   <col width="80" >
	   <col width="80" >
	   <col width="80" >
	   </colgroup>
		<tr bgcolor="#FFFFFF">
		   <td height="20">1</td>
		   <td>2</td>
		   <td>3</td>
		</tr>
	  </table>
  
	</td>
    <td>
	 <div id='scroll1' style="width:450;overflow:hidden ">

	  <table style="width:900 " height="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#666666">
	   <colgroup>
	   <col width="150" >
	   <col width="150" >
	   <col width="150" >
	   <col width="150" >
	   <col width="150" >
	   </colgroup>
		<tr bgcolor="#FFFFFF">
	   <td>1</td>
	   <td height="20">2</td>
	   <td>3</td>
	   <td>4</td>
		</tr>
	  </table>
	 
	  
	 </div> 
	</td>
  </tr>
  <tr>
    <td align="left" valign="top">
 <div id='scroll2' style="height:150;overflow-y:hidden;overflow-x:scroll">
  
 
  <table width="240" height="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#666666">
   <colgroup>
   <col width="80" >
   <col width="80" >
   <col width="80" >
   </colgroup>
 
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
    </tr>
  </table>
 
 </div>
 </td>
    <td align="left" valign="top">
 <div style="width:450;height:150;overflow:scroll ">
 
  <table style="width:900 " height="100" border="0" cellpadding="0" cellspacing="1" bgcolor="#666666">
  <colgroup>
  <col width="150" >
  <col width="150" >
  <col width="150" >
  <col width="150" >
  <col width="150" >
  </colgroup>
    <tr bgcolor="#FFFFFF">
   <td width="100" height="20"> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
    </tr>
    <tr bgcolor="#FFFFFF">
   <td height="20"> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
    </tr>
  </table>
 
  
 </div>
 </td>
  </tr>
</table>
<p id="y"> </p>
<p id="x"> </p>
</body>

 

ConstXiong 备案号:苏ICP备16009629号-3