Как установить границу дочернего элемента в моем случае

Question

Я пытаюсь выровнять границу моего дочернего элемента внутри td с той же шириной границы td.

Например

<table class="table"> 
    <tr> 
     <td>abc</td><td>edc <div class="child"></div></td><td>test</td>  
     <td>test</td> 
    </tr> 
    <tr> 
     <td> test </td><td>45g</td><td>block</td><td>test</td> 
    </tr> 
    <tr> 
     <td>test</td><td>test</td><td>swap</td><td>test</td> 
    </tr>  
</table> 

CSS - с начальной загрузки.

table { 
    border-collapse: inherit; 
    border-spacing: 5px; 

} 

.table>tbody>tr>td { 
    position:relative; 
    border:solid 3px red; 
    padding:0; 
} 

.child { 
    border-left:solid 3px green; 
    border-right:solid 3px green; 
    width:100%; 
    height:10px;  
} 

http://jsfiddle.net/tfjm7L5y/4/

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

Answer 1

Вместо того чтобы устанавливать ширину 100%, попробуйте дать дисплей стиля блока обрабатывать ширину, а затем установите отрицательный запас по ширине границы:

.child { 
    border-left:solid 3px green; 
    border-right:solid 3px green; 
    height:10px; 
    margin: 0 -3px; 
} 

Посмотрите здесь: http://jsfiddle.net/tfjm7L5y/7/

Answer 2

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

position:absolute; 
bottom:0; 
left:-3px; 
right:-3px; 

jsFiddle example