代码之家 › 专栏 › 技术社区 › Mayur

在IE7中不起作用的表中添加两行之间的间距

css-tables internet-explorer-7 internet-explorer css html

Mayur · 技术社区 · 16 年前

我有一张桌子,需要两行之间的间隔 <tr> 一张桌子。我是这样做的:

table.fltrTbl
{
    margin:0px;
    padding:0px;
    border-collapse:separate;
    border-spacing:0 11px;  
}

table.fltrTbl td
{ 
    vertical-align:middle;
    padding-right:14px; 
    padding-left:0;
    padding-top:0;
    padding-bottom:0;
    margin:0;
}

table.fltrTbl tr
{ 
}

但是,这个解决方案不适用于IE7。为了在IE7中发挥作用,你能建议对这个类做些什么修改吗?

注意:请不要对表中的每一个tr单独作答。

6 回复 | 直到 9 年前

Phil Mander 16 年前

尝试删除边框间距,将border collapse更改为collapse,然后使用td padding创建间距。

RoToRa 16 年前

border-spacing 完全没有(也就是说只有一个值是8)。对于IE7,可以使用HTML属性 cellspacing 取而代之的是-而且水平和垂直间距只有一个值。

在表格中有水平间隙的唯一跨浏览器方法是使用空白表格行和单元格。

amypellegrini 14 年前

border: 2px solid transparent 仅适用于ie7(您可以使用条件注释将此样式仅应用于ie7)。

在给出的示例中,我在td周围添加了一个2px透明边框,但它可能是您想要的值,并且它适用于特定的边框,例如 border-left border-bottom .

amateur barista 14 年前

对我来说 border-collapse property 到 border-collapse: separate td 元素是起作用的。根据W3C,当使用 collapse 边框间距和空单元格属性将被忽略 separate 边界间距属性是值得尊敬的,这就是我们想要的。

cr1msaun 12 年前

*border-collapse: expression('separate', cellSpacing = '5px');

user4510229 user4510229 11 年前

为了给菜单项添加间距,我在css中使用了padding-bottom属性。

<style>
div.c4 {
           font-family: Arial, Helvetica, sans-serif;
           font-size: 12px;
           font-weight: bold;
           text-align: left;
           color: #800000;
           padding-bottom: .5em;
        }
</style

HTML:

<table width="15%" style="margin: auto;" >
<tr>
<th scope="col">
<div class="c4">Home</div>
<div class="c4">About Me</div>
<div class="c4">Photographs</div>
<div class="c4">Locations</div>
<div class="c4">Testimonials</div>
</th>
</tr>
</table>

下面是我的jsfiddle示例: http://jsfiddle.net/IConway/htsqoe7j/