JSFiddle - React, Tailwind, and code Playground

by joeycakes

HTML

<div class="container">
    <h3 class="page-header">Sortable table header css example</h3>
<div class="fixed-table-container">
    <table class="table table-hover">
        <thead>
        <tr>
            <th>
                <div class="th-inner sortable">Header 1</div>
                <div class="fht-cell"></div>
                </th>
            <th>
                <div class="th-inner sortable">Header 2</div>
                <div class="fht-cell"></div>
                </th>
            <th>
                <div class="th-inner sortable">Header 3</div>
                <div class="fht-cell"></div>
                </th>
            <th>
                <div class="th-inner sortable">Header 4</div>
                <div class="fht-cell"></div>
                </th>
            <th>
                <div class="th-inner sortable">Header 5</div>
                <div class="fht-cell"></div>
                </th>
        </tr>
        </thead>
        <tbody>
            <tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
            <tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
            <tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
            <tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
            <tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
        </tbody>
    </table>
</div>
</div>

CSS

.fixed-table-container thead th .sortable{
    cursor: pointer; /* Not supported in IE5.5 ; Workaround += cursor: hand; */
    padding-right: 30px;
}

.fixed-table-container thead th .sortable:before, 
.fixed-table-container thead th .sortable:after {
	content: ' ';
	height: 0;
	position: absolute;
	width: 0;
	border: 10px solid transparent; /* arrow size */
}

.fixed-table-container thead th .sortable:after {
    content: " ";
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;  /* left arrow slant */
	border-right: 5px solid transparent; /* right arrow slant */
	border-bottom: 5px solid #2f2f2f; /* bottom, add background color here */
	font-size: 0;
	line-height: 0;
    top: 0px;
    left: 0px;
}