来点基础的——td设置固定宽度后，会自动拉伸吗？

DBear

浏览: 231139 次
性别:
来自: 上海

最近访客更多访客>>

oracle1234

进击的小白

chw751039

Sdky

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

前端技术

面试 IE CSS HTML

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

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

看代码：

<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运行结果截图：