Question

我正在尝试为我的桌子创建一个div hack。

我想在表格单元格中放置一个div来阻止单元格的底部边框，并创建一个单元格在下方展开的效果。

HTML

<table cellspacing="15">
    <tr>
       <td>123</td><td>123 <div class="block"></div></td><td>123</td><td>123</td>
    </tr>
    <tr>
        <td>123</td><td>123</td><td>123</td><td>123</td>
    </tr>
    <tr>
        <td>123</td><td>123</td><td>123</td><td>123</td>
    </tr>    
</table>

css

td {
    position:relative;
    border:solid 1px red;
    padding:0;
}

.block {
    background-color: white;
    border-left:solid 1px red;
    border-right:solid 1px red;
    position:absolute;
    width:100%;
    height:10px;
    top:10px;

}

http://jsfiddle.net/tfjm7L5y/

由于某种原因，我的.block div中的左边框和右边框不与表格单元格的右/左边框对齐。这里有什么我想念的吗？谢谢你的帮助！

Answer 1

您可以指定left属性以解决错位。元素.block <div>是其父元素的子元素，因此其边框也包含在父<td>空间中。这就是为什么.block <div>无法与<td>上最远的外边框正确对齐的原因。差异应该是父<td>边框（1px）的大小。

.block {
    background-color: white;
    border-left:solid 1px red;
    border-right:solid 1px red;
    position:absolute;
    width:100%;
    height:10px;
    top:10px;
    left: -1px;

}

http://jsfiddle.net/tfjm7L5y/1/

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

1 个答案: