html - 如何在我的案例中设置子元素边框

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 - 带有 Bootstrap 。

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 边框的子元素覆盖 td 边框，因此绿色边框位于红色边框之上。可能吗？

Answer 1

不要将宽度设置为 100%，而是尝试让 block 样式显示处理宽度，然后为边框宽度设置负边距:

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

在这里查看:http://jsfiddle.net/tfjm7L5y/7/