2010-08-09 22 views
3

我有一個表格,我需要表格的兩行<tr>之間的間距。我做了以下幾種方式:在IE7中無法工作的表格中添加兩行間距

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應用單獨的類。

回答

5

嘗試刪除border-spacing,將border-collapse更改爲摺疊,並使用td padding創建間距。

+0

工作!謝謝.. – Mayur 2010-08-09 10:10:34

+0

不幸的是,填充不適合垂直對齊:中間 – NetMage 2013-10-25 18:24:48

3

IE7根本不支持border-spacing。 (和IE 8只有一個值)。對於IE7,您可以使用HTML屬性cellspacing來代替 - 但也僅適用於水平和垂直間距的一個值。

在表中有一個橫向間隙的唯一跨瀏覽器方式是使用空白表格行和單元格。

+0

這是錯誤的,這在IE7中起作用。 '* border-collapse:expression('separate',cellSpacing ='5px');' – Nepaluz 2014-01-22 01:32:28

+0

@Nepaluz你可以展示一些關於它如何工作的文檔嗎? – RoToRa 2014-01-24 10:58:38

+0

什麼是IE7文檔?爲什麼不在IE7中運行它,看看它是否有效?我知道它的工作原理如下:1.在語句(一個廣爲人知的IE7入侵)之前加上星號(*)和2.應用一個表達式(MS喜歡的事情)。我可以更詳細..... – Nepaluz 2014-01-30 15:13:08

1

我只對ie7使用border: 2px solid transparent就能達到預期的效果(您可以使用條件註釋將此樣式僅應用於ie7)。

在給出的示例中,我在td周圍添加了2px透明邊框,但它可能是您想要的值,並且適用於特定邊框,如border-leftborder-bottom

1

對於我在td元素上更改border-collapse propertyborder-collapse: separate是有效的。根據W3C的說法,當使用collapseborder-spacing和empty-cells屬性將被忽略。當使用separate border-spacing屬性值得尊重時,那就是我們想要的。

1

我發現通過表達一個修正:

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

要添加間距我在CSS中使用的填充底屬性我的菜單項。

<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/