一个HTML的小问题，但很神奇哦~

以下代码在WORD中正常，在IE中不正常怎么回事？
显示出错在最后一行；
一共7列
第一行  2   2   1   1   1
第二行          7
第三行  1       6
这样看来，最后一行的1应该只占第一行第一列的一半才对，而我的IE9怎么都显示是成
第一行  2   2    1    1   1
第二行           7
第三行  2        5
这样的样子，也就是第三行的第一列总和第一行的第一列对齐了！！怎么回事啊！难道是兼容性问题，表格这么简单的东西不存在啊！有人测试一下吗，很神奇啊！


   <table style="width: 900px; border-collapse: collapse;" border="1" bordercolor="#c0c0ff">
        <tr>
            <td align="center" style="width: 112px" colspan="2">
                培训课题
            </td>
            <td align="center" style="width: 224px" colspan="2">
            </td>
            <td align="center" style="width: 112px">
            </td>
            <td align="center" style="width: 200px">
                采用方式
            </td>
            <td align="center" style="width: 250px">
            </td>
        </tr>
        <tr>
            <td style="width: 898px;height:250px; vertical-align:top;" colspan="7">
                参加培训部门及人员姓名：<br />
            </td>
        </tr>
        <tr style="height:200px;">
            <td align="center" style="width: 56px; text-align:center;">
              <span style="width:5px;">培训效果</span>  
            </td>
            <td align="center" style="width: 842px" colspan="6">
                &nbsp;
            </td>
        </tr>
    </table>

15 个解决方案

#1

  <table style="width: 900px; border-collapse: collapse;" border="1" bordercolor="#c0c0ff">
  <tr>
  <td align="center" style="width: 112px" colspan="2">
  培训课题
  </td>
  <td align="center" style="width: 224px" colspan="2">
  </td>
  <td align="center" style="width: 112px">
  </td>
  <td align="center" style="width: 200px">
  采用方式
  </td>
  <td align="center" style="width: 250px">
  </td>
  </tr>
  <tr>
  <td style="width: 898px;height:250px; vertical-align:top;" colspan="7">
  参加培训部门及人员姓名：<br />
  </td>
  </tr>
  <tr style="height:200px;">
  <td align="center" style="width: 56px; text-align:center;">
  <span style="width:5px;">培训效果</span>   
  </td>
  <td align="center" style="width: 842px" colspan="6">
  &nbsp;
  </td>
  </tr>
  </table>

#2

看这么久还看不懂你什么意思

#3

引用 2 楼  的回复:

看这么久还看不懂你什么意思

这可是HTML的最基础表格样式了，把代码保存为网页文件，用浏览器打开就知道了，显示结果明显最后一行的第一列宽度不正常。按代码理解，它应该只有第一行第一列的一半宽，因为无论从宽度上还是单元格所占列数来进它都只有一半宽。但实际上显示它总与第一行第一列一样宽。神奇啊，而用WORD打开显示却正常。

#4

我觉得你是没事找事做，这有什么神奇的，一张表格里，当然是对齐的咯，不对齐才不正常！

#5

不同的宿主进程对html的解析是不同的。这个不了解，才叫“神奇”哦！

#6

至少在html3、html4时代，从来没有一个工业级的规范说这个地方要像素级地怎样地。你要是能找出一个统一规范来，乔布斯也不用嫉妒得恶毒攻击flash一定要除掉它了，因为flash在各种宿主上的显示才是非常一致的。

#7

该回复于2012-05-25 10:20:49被版主删除

#8

引用 6 楼  的回复:

至少在html3、html4时代，从来没有一个工业级的规范说这个地方要像素级地怎样地。你要是能找出一个统一规范来，乔布斯也不用嫉妒得恶毒攻击flash一定要除掉它了，因为flash在各种宿主上的显示才是非常一致的。

那有什么办法没？
能实现真正我想要的表格样式？

#9

引用 4 楼  的回复:

我觉得你是没事找事做，这有什么神奇的，一张表格里，当然是对齐的咯，不对齐才不正常！

你是没具体测试和看代码吧~对齐了就真不正常了。一个单元格宽112PX，COLSPAN=2,一个单元格56PX，COLSPAN=1，怎么可能对齐？对齐也只有IE能做得出来了。在WORD里面就严格只有一半宽，对版主说的宿主问题其实我不在乎的，说白了就是有兼容性问题，而我现在只想知道的是在IE下有什么办法达到我要的效果？

#10

word跟IE根本不是一个概念
虽然能解释

#11

我实现了我要的功能了，我从WORD里面另存为，然后不断的改里面的代码，最后发现WORD会在最后加上一句

<![if !supportMisalignedColumns]>
 <tr height=0>
  <td width=81 style='border:none'></td>
  <td width=81 style='border:none'></td>
  <td width=162 style='border:none'></td>
  <td width=81 style='border:none'></td>
  <td width=81 style='border:none'></td>
  <td width=81 style='border:none'></td>
 </tr>
 <![endif]>

然后成实现了，原来他还需要弄一行来定义全部列，看来IE是至少需要一行能包含所有列，否则就乱显示了。

#12

不好意思哈。请计算好你的宽度哈，table 只认识最大宽度。你最后一行会影响其他行的宽度的。。建议你用百分比去设宽度

#13

 <td align="center" style="width: 112px" colspan="2" nowrap="nowrap">
            培训课题
        </td>


如此修改一下即可

#14

#15

你第一行的TD个数大于其它行的TD个数，那么，你在你其它行的TD里要加colspan属性，详细colspan用法可以baidu 。