向表头添加自定义样式

Question

我使用示例表创建了以下小提琴，我需要为每个表标题添加特定样式。

fiddle

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

样本风格

Answer 1

使箭头使用带有css3三角形的:after滤镜。

在框架内部使用轮廓。

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;
}

您可以根据自己的心灵内容自定义颜色，边距和轮廓。

更新：编辑链接以摆弄第三版。