html - 垂直和水平边界线

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

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

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;
}