html - HTML 表格中的花式边框

Question

所以我正在设计一个表格，我想为表格标题做一个非常漂亮的下划线。

虽然我很努力，但在互联网上看了一下，但找不到任何东西。

这是表结构:

<table>
    <thead>
        <tr>
            <td>Number</td>
            <td>Name</td>
            <td>Address</td>
        </tr>
    </thead>

    <tbody></tbody>
</table>

还有我现在的造型:

table {
    width: 100%;
}

    table thead {
        font-weight: bold;
    }

        table thead td {
            margin-right: 5px;
            border-collapse: separate;
            border-spacing: 10px 5px;
            border-bottom: 2px solid #427AA8;
        }

    table tbody {
        font-size: 90%;
    }

        table tbody tr {
            line-height: 2em;
            border-bottom: 1px solid #CCC;
        }

        table tbody td {
            padding: 0 5px;
        }

这是代码的 jsfiddle:http://jsfiddle.net/tYA4e/1/

我正在寻找的是列之间边界的中断，但仅限于 thead。

还有一个我想要实现的例子:http://i.imgur.com/OHrhJ.jpg

有没有办法通过一些简单的 CSS 来实现这一点？

Answer 1

边框必然会扩展其元素的整个宽度；因此，要将边框仅部分地扩展到元素的宽度，则必须将边框应用于子元素，并相应调整大小。

也就是说，实现这一目标的唯一方法似乎是在 td 中嵌套一个元素(在本例中为 span)，并使用以下 CSS :

table thead td span {
    display: inline-block;
    width: 80%;
    border-bottom: 2px solid #427AA8;
}

JS Fiddle demo .

尽管如此，值得注意的是，对于表格标题，th(表格标题)元素可能更适合您在这种情况下使用。

进一步思考，当然，也可以使用样式化的 hr 元素，这允许您对 hr 的宽度进行像素级控制在此示例中，它可以从父 td 的右边缘延伸到 10px):

table thead td hr {
    width: 80%;
    margin: 0 10px 0 0;
    border-bottom: 2px solid #427AA8;
}

JS Fiddle demo .