怎么让table中左右2边的列固定，中间的列随浏览器大小变化

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>table.html</title>

	

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    

	<style type="text/css">

  	

  	.x-panel-mc .x-panel-body {

		background:transparent none repeat scroll 0 0;

		border:0 none;

		font-size:13px;

	}

	

	.empty .x-panel-body {

            padding-top:20px;

            padding-left : 20px;

            text-align:left;

            font-size:11px;

           

     }



	 #header{

		margin:0 auto;

		width:100%;

	 }

     

     .background_title_n{

		background-image: url(n-banner-1.gif);

		height: 50px;

		background-repeat:no-repeat;

	}

     

     .background_head_n{

		background-image: url(n-banner-2.gif);

		height: 50px;

		background-repeat:no-repeat;

	}

	

	.background_logout_n{

		background-image: url(n-banner-3.gif);

		height: 24px;

		background-repeat:no-repeat;

	}

	

	.bgcolor_n{

		height: 26px;

		background-repeat:no-repeat;

		background-image: url(n-banner-4.gif);

	}

     

     .repeat-x-test{

		background-image: url(repeat-1px.jpg);

		height: 50px;

		background-repeat:repeat-x;

	}

	

     

	</style>

	

  </head>

  

  <body>

	<table border="1" width="90%" align="center">

	<tr>

	<td>

 	<div id="header"  align="center">

 	 <!-- #D6E3F2 cellpadding="0" cellspacing="0"  -->

		<table id="" align="center" width="100%" bordercolor="red" border="1"  ><!-- #D6E3F2 -->

			<tr>

				<td width="177" nowrap rowspan="2" class="background_title_n"></td>

				<td width="263" rowspan="2"  class="background_head_n"></td>

				<td width="100%" rowspan="2" ><!-- 这列是随浏览器变化的，是1px的图片repeat-x填充--><div id="pic" class="repeat-x-test"></div></td>

				<td height="24" width="311" class="background_logout_n"><div>

				<table width="100%" border="0" bordercolor="#FF0000"  >

				  <tr>

					<td width="100"></td>

					<td width="81"><a href="#"><font class="usercolor1" size="2" title="退出系统">退出系统</font></a></td>

					<td width="80"><a href="#"><font class="usercolor2" size="2" title="惯用选项">惯用选项</font></a></td>

					<td width="38"><a href="#"><font class="usercolor3"  size="2" title="帮助">帮助</font></a></td>

				  </tr>

				  </table>

			  </div></td>

			</tr>

			<tr >

			  <td align="right" height="30" class="bgcolor_n">

				 <!--<div style="float:right">

					<table border="1" bordercolor="#FF0000"  >

					  <tr>

						<td width="100"></td>

						<td width="81"><font  color="white" size="2" ><div id="nowDateDiv"></div></font></td>

						<td width="70"><font  color="white" size="2" ><div id="nowTodayDiv"></div></font></td>

						<td width="38"><font color="white" size="2"><div id="nowTimeDiv"></div></font></td>

					  </tr>

					  </table>

					</div>

			  --></td>

			</tr>

	  </table>

 	</div> 

	</td>

	</tr>

 </table>

  </body>

</html>

上面的代码中，当浏览器变大的时候，所有的列都会变宽，调不了，我想代码中有注释那个列随浏览器变化而变化，其它列为固定不变，要怎么做啊？