Добавить интервал между двумя строками в таблице, не работающей в IE7 - PullRequest
Новая
       12

Добавить интервал между двумя строками в таблице, не работающей в IE7

3 голосов
/ 09 августа 2010

У меня есть таблица, где мне нужно расстояние между двумя строками <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 ]

5 голосов
/ 09 августа 2010

Попробуйте удалить интервал границы, измените границы коллапса на коллапс и просто используйте отступы td для создания интервала.

3 голосов
/ 09 августа 2010

IE7 вообще не поддерживает border-spacing. (И IE 8 только с одним значением). Для IE7 вы можете использовать вместо этого HTML-атрибут cellspacing, но также только с одним значением для горизонтального и вертикального интервала.

Единственный кросс-браузерный способ иметь горизонтальный разрыв в таблице - это использовать пустую строку таблицы и ячейку.

1 голос
/ 05 декабря 2013

Я нашел исправление с помощью выражения: 

*border-collapse: expression('separate', cellSpacing = '5px');
1 голос
/ 01 февраля 2012

Для меня изменение свойства border-collapse на border-collapse: separate элемента td - это то, что сработало.Согласно W3C, при использовании collapse свойства border-spacing и пустых ячеек будут игнорироваться .При использовании separate свойства интервала границы учитываются, и это то, что мы хотим.

1 голос
/ 15 ноября 2011

Я достиг желаемого эффекта, используя border: 2px solid transparent только для ie7 (вы можете использовать условные комментарии, чтобы применить этот стиль только к ie7).

В данном примере я добавил прозрачную рамку размером 2 пикселя вокругтд, но это могут быть значения, которые вы хотите, и он работает для определенных границ, таких как border-left или border-bottom.

0 голосов
/ 29 июня 2015

Чтобы добавить интервал к моим пунктам меню, я использовал атрибут padding-bottom в моем 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/

...