How to create triangle in table cell for active? - html

Question

My psd is like this
I want to add triangle in table cell only for active sort with css.
But I see this demo.
But I want the triangle to fall in the middle under the table title.
.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)">دامنه های تجاری</th>
<th onclick="sortTable(1)">دامنه های ارزان قیمت</th>
<th onclick="sortTable(2)">دامنه های ملی</th>
<th onclick="sortTable(3)">دامنه های خدماتی</th>
<th onclick="sortTable(4)">دامنه های کشوری</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Answer 1

The result you wanted.
.table-bordered th {
background-color: #24374a;
border: 0;
color: #ffffff;
cursor: pointer;
height: 100px;
width: 150px;
}
.table-bordered th.active {
background-color: #041323;
position: relative;
}
.table-bordered th.active:after {
content: "";
position: absolute;
top: 55%;
left: 0;
right: 0;
transform: rotate(45deg);
height: 20px;
width: 20px;
border-bottom: 5px solid #f27e0a;
border-right: 5px solid #f27e0a;
margin-left: auto;
margin-right: auto;
}
<table class="table table-bordered" id="domainTable">
<thead>
<tr>
<th class="active" onclick="sortTable(0)">دامنه های تجاری</th>
<th onclick="sortTable(1)">دامنه های ارزان قیمت</th>
<th onclick="sortTable(2)">دامنه های ملی</th>
<th onclick="sortTable(3)">دامنه های خدماتی</th>
<th onclick="sortTable(4)">دامنه های کشوری</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Answer 2

.triangle {
position: absolute;
top: 80%;
right: 50%;
float: right;
width: 0;
height: 0;
border-right: 10px solid transparent;
border-bottom: 10px solid red;
transform: rotate(-45deg);
}
td {
border: solid 3px black;
width: 160px;
height: 100px;
position: relative;
}
<table class="table">
<tbody>
<tr>
<td>
<div class="triangle"></div>Make Edits accordingly
</td>
</tr>
</tbody>
</table>