BG позиционирования изображения в таблице заголовка

Question

Как достичь следующих действий с помощью CSS (цвет фона с фоновым изображением, который перекрывает строку заголовка):

Это является частью TH клетки в таблице. TH линия будет в цвете # 0098da, а в конце ячейки TH будет изображение (URL-адрес изображений находится здесь http://tax.allfaces.lv/templates/tax/images/pg_arrow.png).

Я попытался расположить div с изображением bg в TH, но у меня были проблемы с тем, что изображение должно перекрывать границы TH. И в результате я получил followign:

HTML:

<table id="duration-of-refund" border="0"> 
    <tbody> 
     <tr> 
      <th> 
       <p>Purchases in Webshops</p> 
       <div class="img-at">&nbsp;</div> 
      </th> 
      <th> 
       <p>Currency conversion, Refund transfer</p> 
       <div class="img-arrow">&nbsp;</div> 
      </th> 
     </tr> 
     <tr> 
      <td> 
       <p>Some text here Some text here Some text here Some text here Some text here</p> 
      </td> 
      <td> 
       <p>Some text here Some text here Some text here Some text here Some text here</p> 
      </td> 
     </tr> 
    </tbody> 
</table> 

CSS:

#duration-of-refund td { 
    width: 400px; 
} 
#duration-of-refund th { 
    font-size: 21px; 
    color: white; 
    text-align: left; 
    height: 84px; 
    max-height: 84px; 
} 
#duration-of-refund tr th:nth-child(1) { 
    background-color: #0098da; 
} 
#duration-of-refund tr th:nth-child(2) { 
    background-color: #1F5CA9; 
} 
#duration-of-refund tr th:nth-child(1) p, #duration-of-refund tr th:nth-child(2) p { 
    width: 190px; 
    float: left; 
} 
.img-at, .img-arrow { 
    width: 83px; 
    height: 84px; 
    float: right; 
    margin-right: 20px; 
    position: relative; 
    top: -20px; 
} 
.img-arrow { 
    background-image: url(http://tax.allfaces.lv/templates/tax/images/pg_arrow.png); 
} 
.img-at { 
    background-image: url(http://tax.allfaces.lv/templates/tax/images/pg_at.png); 
} 
#duration-of-refund tr td:nth-child(2) { 
    background-color: #cceaf8; 
} 
} 

JSfiddle пример: http://jsfiddle.net/rAVqx/

Я думаю, что Тереза ​​должна быть другим способом, как это сделать.

Пожалуйста, дайте мне несколько подсказок, как это сделать? У меня также есть другие ячейки TH с разными изображениями, которые будут расположены одинаково.

Answer 1

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

float:right;margin-right:90px 

и положение изображения в качестве абсолютного

position: absolute; 

ваш код просто модифицированном

HTML

<table id="duration-of-refund" border="0"> 
    <tbody> 
     <tr> 
      <th> 
       <p>Purchases in Webshops</p> 
       <div style="float:right;margin-right:90px;"> 
       <div class="img-at">&nbsp;</div> 
       </div> 
      </th> 
      <th> 
       <p>Currency conversion, Refund transfer</p> 
       <div style="float:right;margin-right:90px;"> 
       <div class="img-arrow">&nbsp;</div> 
       </div> 
      </th> 
     </tr> 
     <tr> 
      <td> 
       <p>Some text here Some text here Some text here Some text here Some text here</p> 
      </td> 
      <td> 
       <p>Some text here Some text here Some text here Some text here Some text here</p> 
      </td> 
     </tr> 
    </tbody> 
</table> 

CSS:

#duration-of-refund td { 
    width: 400px; 
} 
#duration-of-refund th { 
    font-size: 21px; 
    color: white; 
    text-align: left; 
    height: 84px; 
    max-height: 84px; 
} 
#duration-of-refund tr th:nth-child(1) { 
    background-color: #0098da; 
} 
#duration-of-refund tr th:nth-child(2) { 
    background-color: #1F5CA9; 
} 
#duration-of-refund tr th:nth-child(1) p, #duration-of-refund tr th:nth-child(2) p { 
    width: 190px; 
    float: left; 
} 
.img-at, .img-arrow { 
    width: 83px; 
    height: 84px; 
    float: right; 
    margin-right: 20px; 
    position: absolute; 
    top: -20px; 
} 
.img-arrow { 
    background-image: url(http://tax.allfaces.lv/templates/tax/images/pg_arrow.png); 
} 
.img-at { 
    background-image: url(http://tax.allfaces.lv/templates/tax/images/pg_at.png); 
} 
#duration-of-refund tr td:nth-child(2) { 
    background-color: #cceaf8; 
} 
}