html - How to set a child element border in my case -

I am trying to align my child element range within a td in the same width as the td boundary.

For example

  & lt; Table class = "table" & gt; & Lt; TR & gt; & Lt; Td> ABC & lt; / Td> & Lt; Td> ADC & lt; Div class = "child" & gt; & Lt; / Div & gt; & Lt; / Td> & Lt; TD & gt; Trial & lt; / Td> & Lt; TD & gt; Trial & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; TD & gt; Trial & lt; / Td> & Lt; Td> 45g & lt; / Td> & Lt; TD & gt; Block & lt; / Td> & Lt; Td> Trial & lt; / Td> & Lt; / TR & gt; & Lt; TR & gt; & Lt; TD & gt; Trial & lt; / TD & gt; & Lt; TD & gt; Trial & lt; / TD & gt; & Lt; TD & gt; Swap & lt; / TD & gt; & Lt; TD & gt; Trial & lt; / TD & gt; & Lt; / TR & gt; & Lt; / Table & gt;  

CSS - with bootstrap.

  table {border-fall: heirs; Border-spacing: 5px; } .table & gt; Thesaurus & gt; Tr & gt; Td {status: relative; Border: Solid 3px red; Padding: 0; }. Kids {boundary-left: solid 3px green; Border-right: solid 3px green; Width: 100%; Height: 10px; }  

Actually, I want to cover the TD boundary of the child element of the TD boundary, so the green border is at the top of the red border, is it possible?

Rather than setting the width of 100%, the block style display width, then the width Set negative margins:

  .child {border-left: solid 3px green; Border-right: solid 3px green; Height: 10px; Margin: 0 -3px; }  

See it here: