CSS股利寬度 - 內裏的div ...寬度似乎在IE7

Question

爲關閉到目前爲止，我這樣做編程方式使用VB.net/ASP.net：

<table cellspacing="0" cellpadding="4" border="0" style="border- 
      width:0px;width:100%;border-collapse:collapse;font-size:12px;"> 
    <tr> 
<td colspan="6"></td> 
     <td align="center" colspan="3" style="background-color:#F0D3D3;text- 
      decoration:underline;">SET</td> 
     <td colspan="2" style="background-color:#CFF5CE;"></td> 
     <td align="center" colspan="3" style="background-color:#BEE0F7;text- 
      decoration:underline;">REM</td> 
    </tr> 
    <tr> 
<th style="width:70px;">M</th> 
    <th style="width:70px;">PG</th> 
    <th style="width:70px;">PV</th> 
    <th style="width:70px;">PDD</th> 
    <th style="width:40px;">R</th> 
    <th style="width:55px;">I #</th> 
    <th style="background-color:#F0D3D3;width:70px;">P A</th> 
    <th style="background-color:#F0D3D3;width:70px;">U D</th> 
    <th style="background-color:#F0D3D3;width:70px;">B P</th> 
    <th style="background-color:#CFF5CE;width:70px;">P U</th> 
    <th style="background-color:#CFF5CE;width:70px;">D E</th> 
    <th style="background-color:#BEE0F7;width:70px;">P</th> 
    <th style="background-color:#BEE0F7;width:70px;">U D</th> 
    <th style="background-color:#BEE0F7;width:70px;">B P</th> 
    </tr> 
</table> 

<div style="width:100%;clear:both;text-align:left;margin:0;"> 
    <div style="width:375px;float:left;margin:0;display:block;"> 
    <img onclick="change(this.parent);" src="minus99.jpg" style="border-width:0px;" /> 
    <span style="font-weight:bold;font-size:16px;">Test Company</span> 
    </div> 
    <div style="background- 
     color:#F0D3D3;width:210px;float:left;margin:0;display:block;"></div> 
    <div style="background- 
     color:#CFF5CE;width:140px;float:left;margin:0;display:block;"></div> 
    <div style="background- 
     color:#BEE0F7;width:210px;float:right;padding:0;margin:0;display:block;"></div> 
</div> 

這應該給我四張DIVS在一個容器DIV內。下面是它的現身爲：

alt text http://i44.tinypic.com/2i7wxg9.jpg

非內嵌塊以上的正確塊是從具有完全相同的寬度，因爲我使用了div的那些表。沒有任何CSS爲它們添加像素，我不這麼認爲。我需要排列這些，我不知道我的問題在哪裏。任何幫助，將不勝感激。

Answer 1

Width: 100%覆蓋單個列的寬度。在你的桌子上，有13個<th>，每個桌子的寬度都是桌子寬度的1/13：th。 <th>上的width物業不會執行任何操作。您可以通過將display: inline-block添加到<th>來強制它，但我不想這樣。

此外，你應該設置粉紅色和綠色的divs到float: right爲了消除白色inbetween綠色和藍色（注意，但你必須改變你的代碼中的div的順序）。

此外，如果您想要呈現表格數據，我建議使用表格。

Answer 2

您是否在桌上put cellspacing="0" cellpadding="0"？如果不是，那可能是差異來自哪裏。 或者可能是邊框。

你可以包含表頭嗎？

Answer 3

您可以改用div會在colspan="[number]"，例如：

<table cellspacing="0" cellpadding="4" border="0" style="border-width:0px;width:100%;border-collapse:collapse;font-size:12px;"> 
<tr> 
    <td colspan="6"></td> 
    <td align="center" colspan="3" style="background-color:#F0D3D3;text-decoration:underline;">SET</td> 
    <td colspan="2" style="background-color:#CFF5CE;"></td> 
    <td align="center" colspan="3" style="background-color:#BEE0F7;text-decoration:underline;">REM</td> 
</tr> 
<tr> 
    <th style="width:70px;">M</th> 
    <th style="width:70px;">PG</th> 
    <th style="width:70px;">PV</th> 
    <th style="width:70px;">PDD</th> 
    <th style="width:40px;">R</th> 
    <th style="width:55px;">I #</th> 
    <th style="background-color:#F0D3D3;width:70px;">P A</th> 
    <th style="background-color:#F0D3D3;width:70px;">U D</th> 
    <th style="background-color:#F0D3D3;width:70px;">B P</th> 
    <th style="background-color:#CFF5CE;width:70px;">P U</th> 
    <th style="background-color:#CFF5CE;width:70px;">D E</th> 
    <th style="background-color:#BEE0F7;width:70px;">P</th> 
    <th style="background-color:#BEE0F7;width:70px;">U D</th> 
    <th style="background-color:#BEE0F7;width:70px;">B P</th> 
</tr> 
<tr> 
    <td colspan="6"> 
      <img onclick="change(this.parent);" src="minus99.jpg" style="border-width:0px;" /> 
      <span style="font-weight:bold;font-size:16px;">Test Company</span> 
    </td> 
    <td colspan="3" style="background-color:#F0D3D3;"></td> 
    <td colspan="2" style="background-color:#CFF5CE;"></td> 
    <td colspan="3" style="background-color:#BEE0F7;"></td> 
</tr> 
</table> 

希望我幫助你.. =）