使用colSpans的HTML表格未按预期显示

我有一个简单的HTML表的示例,其中包含许多div块.

  

    

    
1
2
    
3
    
4
5
  

问题是第2行的外观不正确.colspans的行为不符合预期.如果我删除第四行,那么第二行表现正确.

我知道div和CSS是要走的路,但对于这个应用程序,此时,这是不可能的.

你的问题是自动表格布局.浏览器很难查看所有单元格,并计算每个单元格的宽度; 当有colspans时,它是双重的(特别是在这个例子中,没有办法说明第3列和第4列应该有多宽); 当你是一个糟糕的老思维的Internet Explorer时,这是三难的,祝福.

不要让你的浏览器挣扎,喘息和缓慢渲染:使用fixed table-layout并准确地声明每列的宽度.通常,这将通过元素完成:

#thing { width: 950px; table-layout: fixed; border-spacing: 0; }
#thing .wide { width: 295px; }
#thing .narrow { width: 180px; }
#thing.box { border: solid black 1px; }


    
    

        
1
        
2
    
    

        
3
    
    

        
4
        
5
    

但是,当该列中没有单个未删除的单元格时,Webkit中存在忽略宽度的错误.对于表来说这是非常不寻常的,但在上面的示例中就是这种情况:只有第一列包含未扩展的单元格.要解决它,您可以在开始时用哑行替换元素,设置为具有最小高度:

#thing .cols td { height: 1px; line-height: 1px; font-size: 1px; }


    

或者,有时不那么具有侵入性,保留s并在底部添加一个哑行: