Adding custom style to table headers

Question

I've created the following fiddle with a sample table where I need to add specific style to each table header.

fiddle

The following pic shows a sample of the style I need to add. How can I achieve this styling using only the th tag?

sample style

Answer 1

To make arrows use :after filter with css3 triangles.

To make frame inside th use outline.

jsFiddle (Forked from your fiddle and marked with comments what was changed).

Briefly:

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

You may customize colors, margins and outline to your hearts content.

UPDATED: Edited link to fiddle to third revision.