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边框的子元素覆盖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

如何在我的情况下设置子元素边框

2 个答案: