html - 向表头添加自定义样式

Question

我用一个示例表创建了以下小提琴，我需要在每个表头中添加特定的样式。

小提琴

下图显示了我需要添加的样式示例。如何仅使用th标签来实现这种样式？

样品风格

Answer 1

要制作箭头，请使用:after带有 css3 三角形的过滤器。

使用轮廓在里面制作框架。

jsFiddle（从您的小提琴中分叉并用注释标记了更改的内容）。

简要地：

/* Makes triangle */
.table-header th:after {
    content: " ";
    /* just adjusting position */
    margin-left: 5px;
    margin-right: 3px;
    margin-bottom: 4px;
    display: inline-block;
    /* reference to http://css-tricks.com/snippets/css/css-triangle/ on how to make triangles */
    /* triangle */
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;

    border-top: 4px solid #ccc;
    /* /triangle */
}

/* Adds outline for active element (<th class="active">) */
.table-header th.active {
    outline: 1px solid #ccc;
    outline-offset: -9px;
}

/* Forbid header to do word-wrapping, or it will look ugly */
.table-header th {
    /* ... some code that was here ... */
    white-space: nowrap;
}

您可以根据自己的喜好自定义颜色、边距和轮廓。

更新：编辑链接到第三次修订。