CSS Столбец на границе с таблицей на границе стола

Question

Я вряд ли эксперт в css, так что это немного разочаровывает. У меня есть сетка, заполненная ретранслятором. Я хочу, чтобы каждая строка имела 1px-границу вдоль нижней части, чтобы визуально отделять строки. Мне также нужна темно-серая рамка с каждой стороны стола. При следующей 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 http://img251.imageshack.us/img251/9278/borderff.png

И это в IE8:

alt text http://img412.imageshack.us/img412/7092/borderie.png

Мне нужно, чтобы темная серая граница оставалась твердой, а не разбивалась на каждую границу строки. В таблице есть два столбца, но размер ячейки равен 0px, поэтому установка border-bottom на tr делает непрерывную границу. Может ли кто-нибудь предложить некоторые изменения в css, чтобы заставить это работать?

Answer 1

Попробуйте это, чтобы получить эффект, который вы хотите:

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

Answer 2

Используя. этот 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/etc), поэтому он будет выглядеть неправильно. Зависит от того, насколько вы совместимы. Поэтому вместо этого я использовал «последний» класс.

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