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>

这应该在容器DIV中给我四个DIVS。以下是它的结果：

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

非内联块上方的正确块来自与我在Div上使用的宽度相同的宽度的表格。我没有想到，没有任何CSS添加像素。我需要排队，我无法弄清楚我的问题在哪里。任何帮助将不胜感激。

Answer 1

您可以使用colspan="[number]"代替div，例如：

<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>

希望我帮助你.. =）

Answer 2

你在桌子上put cellspacing="0" cellpadding="0"了吗？如果没有，那可能就是差异的来源。或者也许是边境。

可以包含表格标题吗？

Answer 3

表上的

Width: 100%会覆盖单个列宽。在你的表中，有13 <th>，每个宽度为表宽度的1/13：th。 width上的<th>属性无效。您可以通过向display: inline-block添加<th>来强制它，但我不想这样做。

此外，您应该将粉红色和绿色div设置为float: right，以便删除绿色和蓝色之间的白色（请注意，您必须更改代码中div的顺序）。< / p>

此外，如果您的目标是提供表格数据，我建议您使用表格。

CSS Div Width - 在IE7中，Lins divs ...宽度似乎已关闭

3 个答案: