0

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

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

这是表结构：

<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？

4

2 回答 2

4

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

也就是说，唯一可行的方法似乎是在td（在本例中为 a span）中嵌套一个元素，并使用以下 CSS：

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

JS 小提琴演示。

顺便说一句，值得注意的是，对于表格标题，th(table-heading) 元素可能更适合您在这种情况下使用。

进一步考虑，当然，也可以使用样式hr元素，它允许您对 ' 的宽度进行像素级控制，hr因为在本例中，它可以从 parent的10px右边缘延伸到td：

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

JS 小提琴演示。

于 2012-07-05T14:17:09.540 回答
1

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

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

现在只需设置 th 和 td 的样式。

于 2012-07-05T14:22:58.660 回答