td设置固定宽度后，会自动拉伸吗？

这是一道看似很简单，但是很考察html基础的笔试题。面试回来后，赶紧测了 一下，发现答案是：不会。于是博主的变态好奇心泛滥了，开始排列组合。

   下面代码是各种宽度组合，有符合我的逻辑的，有诡异不可控的。感兴趣的同学运行一下看看吧。

 

   看代码：

 

Html代码 复制代码 收藏代码
  1. <HTML>  
  2. <HEAD>  
  3. <style type="text/css">  
  4. table   
  5. {text-align: center;   
  6. font-family: Verdana, Geneva, Arial, Helvetica, sans-serif ;   
  7. font-weight: normal;   
  8. font-size: 11px;   
  9. color: #fff;   
  10. background-color: #666;   
  11. border: 0px;   
  12. border-collapse: collapse;   
  13. border-spacing: 0px;}   
  14.   
  15. table td   
  16. {background-color: #666;   
  17. color: #fff;   
  18. padding: 4px;   
  19. text-align: left;   
  20. border-bottom: 2px #fff solid;   
  21. font-size: 12px;   
  22. font-weight: bold;}   
  23.   
  24. </style>  
  25. </HEAD>  
  26.   
  27. <BODY>  
  28. <div id="tableContainer">  
  29.   <table width=380>  
  30.       <tr><td colspan=2>table长度380,左td宽度10，右宽度无</td></tr>  
  31.       <tr>  
  32.         <td width=10>我长长长长长长长</td><td>我打酱油的</td>  
  33.       </tr>  
  34.   </table>  
  35.   <table>  
  36.       <tr><td colspan=2>table宽度无,左td宽度50%，右宽度无</td></tr>  
  37.       <tr>  
  38.         <td width=50%>我长长长长长长长</td><td>我打酱油的</td>  
  39.       </tr>  
  40.   </table>  
  41.   <table width=280>  
  42.       <tr><td colspan=2>table宽度280,左td宽度10，右宽度无</td></tr>  
  43.       <tr>  
  44.         <td width=10>我长长长长长长长</td><td>我打酱油的</td>  
  45.       </tr>  
  46.   </table>  
  47.   <table width=280>  
  48.       <tr><td colspan=2>table宽度无,左td宽度50%，右宽度50%</td></tr>  
  49.       <tr>  
  50.         <td width=50%>我长长长长长长长</td><td width=50%>我打酱油的</td>  
  51.       </tr>  
  52.   </table>  
  53.   <br>  
  54.   <span>从这儿往下，就是我困惑和不可控的例子了。。。</span>  
  55.   <br>  
  56.   <table width=280>  
  57.       <tr><td colspan=2>table宽度280,左td宽度50%，右宽度10%</td></tr>  
  58.       <tr>  
  59.         <td width=50%>我长长长长长长长</td><td width=10%>我打酱油的</td>  
  60.       </tr>  
  61.   </table>  
  62.   <table width=280>  
  63.       <tr><td colspan=2>table宽度280,左td宽度50，右宽度150</td></tr>  
  64.       <tr>  
  65.         <td width=50>我长长长长长长长</td><td width=150>我打酱油的</td>  
  66.       </tr>  
  67.   </table>  
  68. </div>  
  69. </body>  
<HTML>
<HEAD>
<style type="text/css">
table
{text-align: center;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif ;
font-weight: normal;
font-size: 11px;
color: #fff;
background-color: #666;
border: 0px;
border-collapse: collapse;
border-spacing: 0px;}

table td
{background-color: #666;
color: #fff;
padding: 4px;
text-align: left;
border-bottom: 2px #fff solid;
font-size: 12px;
font-weight: bold;}

</style>
</HEAD>

<BODY>
<div id="tableContainer">
  <table width=380>
      <tr><td colspan=2>table长度380,左td宽度10，右宽度无</td></tr>
      <tr>
	    <td width=10>我长长长长长长长</td><td>我打酱油的</td>
	  </tr>
  </table>
  <table>
      <tr><td colspan=2>table宽度无,左td宽度50%，右宽度无</td></tr>
      <tr>
	    <td width=50%>我长长长长长长长</td><td>我打酱油的</td>
	  </tr>
  </table>
  <table width=280>
      <tr><td colspan=2>table宽度280,左td宽度10，右宽度无</td></tr>
      <tr>
	    <td width=10>我长长长长长长长</td><td>我打酱油的</td>
	  </tr>
  </table>
  <table width=280>
      <tr><td colspan=2>table宽度无,左td宽度50%，右宽度50%</td></tr>
      <tr>
	    <td width=50%>我长长长长长长长</td><td width=50%>我打酱油的</td>
	  </tr>
  </table>
  <br>
  <span>从这儿往下，就是我困惑和不可控的例子了。。。</span>
  <br>
  <table width=280>
      <tr><td colspan=2>table宽度280,左td宽度50%，右宽度10%</td></tr>
      <tr>
	    <td width=50%>我长长长长长长长</td><td width=10%>我打酱油的</td>
	  </tr>
  </table>
  <table width=280>
      <tr><td colspan=2>table宽度280,左td宽度50，右宽度150</td></tr>
      <tr>
	    <td width=50>我长长长长长长长</td><td width=150>我打酱油的</td>
	  </tr>
  </table>
</div>
</body>

 

 

 下面是FF运行结果截图：


 

 

  这个是IE8测试结果截图，让我更更更困惑了，连可控的都变得不可控，除了table的总宽度。。。。


 

后来我又尝试了让table宽度固定，左td右td的宽度和等于table宽度，发现这样，FF和IE的效果相同，也是预想的合理效果。因此，为了以后不再纠结于不可控和兼容问题，我决定写table确定一个原则：td宽度不论是绝对的还是相对的，累加和都要等于table的宽度。

posted @ 2013-01-27 16:59  shoupifeng  阅读(10585)  评论(0)  编辑  收藏  举报