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

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/