Adding custom style to table headers - html

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.