Question

我有一张表格，我需要在表格的两行<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。

Answer 1

尝试删除边框间距，更改边框折叠以折叠，然后使用td填充来创建间距。

Answer 2

IE7根本不支持border-spacing。（而IE 8只有一个值）。对于IE7，您可以使用HTML属性cellspacing - 但也只能使用一个水平和垂直间距值。

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

Answer 3

我仅使用border: 2px solid transparent为ie7实现了预期的效果（您可以使用条件注释仅将此样式应用于ie7）。

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

Answer 4

对我而言，border-collapse: separate元素上的border-collapse property更改为td是有效的。根据W3C，当使用collapse 边框间距和空单元格属性时将被忽略。当使用separate边框间距属性时，这就是我们想要的。

Answer 5

我通过表达式找到了修复：

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

Answer 6

要为我的菜单项添加间距，我在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/

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

6 个答案: