html – 不明原因的额外空间,可能填充表格内的表格

这是我正在进行布局的实验.我有很多问题来定位div来实现这个效果,所以我转向旧的待机,表级联.我的问题是,最后一个上方框在所有3个浏览器中都有额外的填充,无论我尝试什么,我似乎无法使用CSS或HTML.红色框应该在你看到的绿色位上齐平,红色框之间蓝色行的右边不应有1px可见的绿线.任何见解都将非常感激.

display: block; }
ottom: 25px;">

最佳答案

你是说这个吗？

http://jsfiddle.net/Nq8Us/1/

我编辑了你的代码并删除了红色的额外“填充”,通过删除内联样式,然后在指向#problem_cell_table的CSS中添加了一些样式.

我建议你删除所有的内联样式并将它们转移到样式表.内联样式会覆盖所有样式表代码.这很糟糕,也解释了为什么你没有从样式表更改中获得任何效果.

至于为什么有填充,这是因为主表的高度包裹所有行,单元格和内部表,高于声明的行高度加在一起.所有行中的单元格会自动调整其大小,以补偿未累计的声明为525px的像素.

在我已经完成的示例中,我通过将内部表的css设置为高度来“欺骗”：100％因此如果发生计算错误,它将扩展以适应高度.

给我一点时间,我会在< div>中添加更多内容.我的答案中的造型方法.

编辑：

好的,我在布局时尝试使用< div>和CSS. http://jsfiddle.net/XbFcJ/

请记住首先使用CSS重置样式表！

CSS：

irst,.third,.last {
    width: 425px;
    background-color: green;
    margin-right: 25px;
}

.top{
    height: 225px;
    border-bottom: 25px solid blue;
}

.left {
    height: 225px;
    width: 200px;
    border-right: 25px solid blue;
}

.content-column.second {
    width: 100px;
    background-color: red;
}

.last .left {
    background-color: red;
}

.last .left .top {
    height: 100px;
    border-bottom: 25px solid blue;
}​

HTML：

irst">
                
ottom">
                    
ottom">
                ottom">