這是一道看似很簡單，但是很考察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>
<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的寬度。