I have an html table:
<colgroup>
<col id="userid">
<col id="username">
<col id="time">
<col id="logout">
<col id="ipaddress">
<col id="lastaccess">
<col id="event">
<col id="errordetail">
</colgroup>
<thead>
<tr>
<th class="sortable">User Id</th>
<th class="sortable">User Name</th>
<th class="sortable">Time</th>
<th class="sortable">Logout</th>
<th class="sortable">IP Address</th>
<th class="sortable">Last Access</th>
<th class="sortable">Event</th>
<th class="sortable">Error Detail</th>
</tr>
</thead>
<tbody id="login_history"></tbody>
</table>
Where I add a css class to col elements to collapse the columns:
.hide_table_column { visibility: collapse; }
I have more css styling on the table header elements (essentially a sort icon using only css):
th.sortable {
position: relative;
cursor: pointer;
}
th.sortable::after {
content: "";
display: inline-block;
margin-left: 5px;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: #000 transparent transparent transparent;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
th.sortable.asc::after {
border-width: 0 4px 4px 4px;
border-color: transparent transparent #000 transparent;
}
The problem is that the arrow on the th element still displays even after I've collapsed the column.
Table with last column collapsed still shows the arrow from styling the th element
I don't want to add more logic to remove/add the sortable class and instead am looking for a way to keep it simple and hide everything by collapsing the column by adding that .hide_table_column css class to the col elements. Is this possible? Would I need to use a proper arrow icon instead of pure css?
