Как показать границу td по цвету фона tr

Использование html-таблиц в Firefox 24 для отображения информации, я широко использую CSS для форматирования строк и столбцов.Как показать границу td по цвету фона tr

Проблема, с которой я сталкиваюсь, заключается в том, что я указал некоторые границы для <td> и background-color для <tr>, но цвет фона tr перекрывает границы td. Является ли нормальным, чем tr стилей, показаны сверху td?

две проблемы:

Все ТД с class="ref" должны правильно отображать 2px вправо и влево границу в .ann и .tbx строк (это не тот случай, когда тр цвет фона устанавливается)
Должна отображаться также первая правая граница столбца, даже если цвет фона установлен в соседних ячейках, см.
```
div.tb tr td:first-child { 
    border-right: 1px solid black; 
} 
```

Вот пример кода (http://jsfiddle.net/RVJSD/):

CSS:

/* Default reset style sheet */ 
* { 
    margin: 0; 
    padding: 0; 
    position: relative; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

.tb { 
    font-family: Ubuntu; 
    font-size: small; 
    text-align: right; 
} 

div.tb tr td { 
    padding: 0 2px 0 2px; 
} 

div.tb tr td { 
    padding: 0 2px 0 2px; 
} 

div.tb tr td:not(:first-child) { 
    width: 92px; 
} 

div.tb tr td:first-child { 
    border-right: 1px solid black; 
} 

div.tb tr:not(:first-child) td:not(:first-child):not(.ref) { 
    border-right: 1px solid #b0b0b0; 
} 

div.tb tr td.ref { /* FIXME */ 
    border-left: 2px solid black; 
    border-right: 2px solid black; 
} 

div.tb tr.ann { 
    background: #99CCFF; 
    font-size: 1.3em; 
    font-weight: bold; 
    text-align: center; 
    border-bottom: 1px solid black; 
} 

div.tb tr.ann td { 
    height: 2.5em; 
} 

div.tb tr.ann td:first-child { 
    background: white; 
    font-size: small; 
    font-weight: bold; 
    text-align: right; 
} 

div.tb tr.ann td.ref { 
    background: green; 
    color: white; 
} 

div.tb tr.txb { 
    background: #99CCFF; 
    font-weight: bold; 
}

HTML:

<body> 
    <div class="tb"> 
     <table> 
      <thead/> 
      <tbody> 
       <tr class="ban"><td>Barfoo</td><td>Bar</td><td>Blah</td><td>Foobar</td><td>FooBlah</td><td>BlahBar</td><td>Foo</td></tr> 
       <tr class="ann"><td>ann</td><td>13</td><td>9</td><td class="ref">13</td><td>12</td><td>9</td><td>15</td></tr> 
       <tr class="nbr"><td>nbr</td><td>-34</td><td>20</td><td class="ref">15</td><td>18</td><td>123</td><td>12</td></tr> 
       <tr class="txb"><td>txb</td><td>2,83%</td><td>3,38%</td><td class"ref">3,84%</td><td>3,21%</td><td>3,52%</td><td>3,27%</td></tr> 
      </tbody> 
     </table> 
    </div> 
</body>

Если возможно, я хотел бы сохранить настройка border-collapse:collapse (а не) как так:

table { 
    border-collapse: collapse; 
    border-spacing: 0; 
}

, и я не люблю Table Border Overlap решения как DIV добавляет дополнительную ширину границы и сделать код менее разборчивым.

источник

2013-10-01 Alex

ваших стилей таблиц стилей все с position: relative. Это заставляет каждую ячейку быть собственным контекстом стекирования и рисовать ее фон и фон его строки и таблицы над границами более ранних ячеек, если они перекрываются (что в сложенной модели границы они делают). И так как вы помещаете все границы на вправо из ячеек (как в, в зависимости от границы предыдущей ячейки, показывающей), все терпит неудачу.

Обратите внимание, что для каждого параметра поведение здесь не определено; CSS (по крайней мере, начиная с версии 2.1) не определяет, что происходит, когда вы относительно позиционируете ячейки таблицы.

источник

2013-10-02 02:15:09

Действительно, комментируя инструкцию 'position: relative;' в таблице стилей defaut reset, корректно отображаются границы. С другой стороны, я полагаю, что если в большинстве стилей для сброса используется 'position: relative;' по умолчанию для всех элементов, не следует ли мне это делать? Если это так, я попытался использовать 'position: static;' on .td tr и td, не воспроизводя исправленное поведение. Кто-нибудь хоть что? – Alex

Почему для сброса таблиц стилей используется 'position: relative'? 'static' будет иметь больший смысл ... И если я создам tr/td в вашем случае с' position: static', границы будут выглядеть точными. –

На http://jsfiddle.net/M25R7/ Я добавил, как вы упоминали 'position: static' в' div.tb tr' и 'div.tb tr td', сохраняя' position: relative' для '*' элемент. К сожалению, границы плохо проявляются. Пока единственный способ заставить его работать, - просто прокомментировать «position: relative» для '*'. Это единственное решение? – Alex

-4

Это вы ищете для парения : вместо .

div.tb tr.ann td:hover { /* FIXME */ 
    background: #069D81; 
    border-left: 2px dotted #069D81; 
    border-right: 2px dotted #069D81; 
}

Js FIDDLE

источник

2013-10-01 13:23:18

@ downvoter: действительно заботясь о комментарии тоже? –

Это не имеет никакого отношения к вопросу. Нет «зависания» вообще – edc65

Как показать границу td по цвету фона tr

ответ

Смежные вопросы