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的宽度进行像素级控制，因为它可以扩展到，在此示例中，10px来自父td}的右边缘：

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

JS Fiddle demo

Answer 2

您还可以将th用于标题单元格 - ＆gt;不再需要使用thead和tbody将行分成组 - 减少标记和减少css。

<table>
    <tr>
        <th>headlinecell</th>
    </tr>
    <tr>
        <td>contentcell</td>
    </tr>
</table>

现在只需设置th和td。

HTML表格中的花式边框

2 个答案: