垂直和水平边界线

Question

如何处理td代码上的边框？

的jsfiddle

http://jsfiddle.net/smxGH/

码

<table>
    <tr>
        <td>wee</td>
        <td>wee</td>
        <td>wee</td>
    </tr>
    <tr>
        <td>wee</td>
        <td>wee</td>
        <td>wee</td>
    </tr>
</table>

table {
    margin:10px;
    border:0;
    border-spacing:0 0;
    border-collapse:separate;
}

td {
    border-top:1px solid white;
    border-bottom:1px solid black;
    border-right:1px solid #aaaaaa;
    border-left:1px solid #aaaaaa;
    padding:4px;
    background:#dddddd;
}

tr:hover > td {
    background:#cccccc;
}

我需要在左右边框上方放置顶部和底部边框。现在垂直边框在每个单元格中重叠1px。是否可以使用CSS解决，或者每个div标记内是否需要td标记等？

此外垂直边框需要折叠（1px边框），而不像顶部和底部分开

Answer 1

我修改了您的td CSS规则，并添加了一些例外。我希望我能正确理解你。这是你想要完成的吗？

td {
    border-top:1px solid white;
    border-bottom:1px solid black;
    padding:4px;
    background:#dddddd;
    border-right: 1px solid #aaaaaa;
}

td:last-child {
    border-right:1px solid #aaaaaa;
}

td:first-child {
    border-left:1px solid #aaaaaa;
}

我发现的另一种做同样事情的方法可能是：

table {
    margin:10px;
    border:0;
    border-collapse:separate;
    /* vvv changes here vvv */
    border-spacing:1px 0;
    background-color: #aaaaaa;
}

td {
    border-top:1px solid white;
    border-bottom:1px solid black;
    padding:4px;
    background:#dddddd;
}