【问题标题】：vertical and horizontal border lines垂直和水平边界线
【发布时间】：2012-11-19 20:16:54
【问题描述】：

处理td标签边框的最佳方法是什么？

jsfiddle

代码

<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 解决，或者每个 td 标签内是否需要 div 标签等？

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

【问题讨论】：

您需要为此使用表格吗？您可以在 SO 找到非常优雅的浮动 div 解决方案
如果您发现自己将<div> 放入<td> 中，请停止，因为您没有正确完成您的工作。 <table> 用于显示表格数据，<div> 用于布局。

标签： html css

【解决方案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;
}

【讨论】：