My design file looks like this:
https://i.sstatic.net/OfM6A.jpg
I'm trying to create a triangle shape in a table cell only for the active sort using CSS.
However, when I attempt to implement it based on this demo:
https://i.sstatic.net/djIHy.jpg
I would like the triangle to be centered underneath the table header instead.
.table-bordered th {
background-color: #24374a;
border: 0;
color: #ffffff;
cursor: pointer;
}
.table-bordered th.active {
background-color: #041323;
position: relative;
}
.table-bordered th.active:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
display: block;
border-left: 20px solid transparent;
border-bottom: 20px solid transparent;
border-top: 20px solid #f27e0a;
margin: auto;
}<table class="table table-bordered" id="domainTable">
<thead>
<tr>
<th class="active" onclick="sortTable(0)">Commercial Domains</th>
<th onclick="sortTable(1)">Affordable Domains</th>
<th onclick="sortTable(2)">National Domains</th>
<th onclick="sortTable(3)">Service Domains</th>
<th onclick="sortTable(4)">Country Domains</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>