css - 表格行的顶部和底部边框

Question

<分区>

Answer 1

这适用于 Firefox 和 IE8:

table {
    width: 100%;
    border-collapse: separate; /* Not really necessary unless you use normalize.js */
    border-spacing: 0px; /* take out spaces between cells */
}

tr {
    background-color: #ccc;
}

td {
    width: 50%;
    border-top: 1px solid #f00; 
    border-bottom: 1px solid #0f0; /* move spacing to the cell */
}

以上使用标准的 HTML 显示系统，因此它可以在 IE8 上运行。我有:

• 将border-collapse设置为separate，这样可以防止表格折叠边框，因此它会绘制每个边框
• 添加了 border-spacing 设置为 0px 以删除单元格之间的间距
• 删除了display指令，允许表格显示为表格
• 将 border 指令移至单元格，而不是行。

http://jsfiddle.net/s6LQ7/1/