Перекрывающаяся граница таблицы CSS - PullRequest
Новая
       10

Перекрывающаяся граница таблицы CSS

4 голосов
/ 12 января 2010

Я вряд ли эксперт в css, так что это немного расстраивает. У меня есть сетка, которая была заполнена повторителем. Я хочу, чтобы каждая строка имела границу в 1 пиксель вдоль дна, чтобы визуально отделить строки. Я также хочу темно-серые рамки на каждой стороне стола. Со следующим CSS для этой таблицы: 

        #repeaterTable
        {
            border-left: 1px solid #A3A3A3; 
            border-right: 1px solid #A3A3A3;
            border-collapse: collapse;
        }
        repeaterTable.td
        {
            border-bottom: 1px solid white; 

        }

Я получаю этот результат в FF (SS правого края таблицы):

alt text

И это в IE8:

альтернативный текст http://img412.imageshack.us/img412/7092/borderie.png

Мне нужно, чтобы темно-серая рамка оставалась сплошной, вместо разрыва для каждой границы строки. Таблица состоит из двух столбцов, но интервал между ячейками равен 0px, поэтому установка границ нижней границы на tr создает непрерывную границу. Кто-нибудь может предложить некоторые изменения в CSS, чтобы это заработало?

Ответы [ 2 ]

9 голосов
/ 12 января 2010

Попробуйте, чтобы получить желаемый эффект: 

#repeaterTable
{
    border-left: 1px solid #A3A3A3; 
    border-right: 1px solid #A3A3A3;
    border-collapse:collapse;
    border-spacing:0px;
    background-color:#ccc;
}
#repeaterTable td:first-child 
{             
    border-left: 1px solid #A3A3A3;  
}
#repeaterTable td:last-child 
{             
    border-right: 1px solid #A3A3A3;  
}
#repeaterTable td
{
    border-bottom: 1px solid white; 
}

Протестировано со следующей разметкой в ​​IE8 и FF (не работает в Chrome / Safari :(). 

<table id="repeaterTable">
 <tr> <td>&nbsp;</td><td>&nbsp;</td> </tr>
 <tr> <td>&nbsp;</td><td>&nbsp;</td> </tr>
 <tr> <td>&nbsp;</td><td>&nbsp;</td> </tr>
 <tr> <td>&nbsp;</td><td>&nbsp;</td> </tr>
</table>
3 голосов
/ 12 января 2010

При использовании этого CSS он будет выглядеть так, как вы хотите, в IE / Safari / FF / Chrome. Проблема заключается в коллапсе границы, именно в этом причина продолжения белой границы до границы таблицы. Если вы удалите это (и добавите обратно в cellpadding = "0" и cellspacing = "0") и перейдете с этим CSS: 

#repeaterTable
{
    border-left: 1px solid #A3A3A3; 
    border-right: 1px solid #A3A3A3;
    background: #CCC;
}
#repeaterTable td
{
    border-bottom: 1px solid white;
}
#repeaterTable td.last
{
    border-bottom: 0px;
}

С этим HTML: 

<table id="repeaterTable" cellpadding="0" cellspacing="0">
<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
<tr><td class="last">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
</table>

Это сработает.

Вы можете использовать: last-child в CSS, но это не поддерживается старыми браузерами (IE7 / и т. Д.), Поэтому там это будет выглядеть неправильно. Зависит от того, насколько совместимым вы хотите быть. Поэтому вместо этого я использовал «последний» класс.

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

...