Table sorting styling question

[brad]

Is there a way to move the arrow indicators closer to the text instead of end of table header? I have a problem with users thinking they are clicking on the arrows but actually clicking on adjacent headers. Right now it looks like the arrows closest to the header are suppose to sort that column but it in fact sorts the column next to it.

[Teodor]

If you want to move the arrows before the titles then you can add the following to your custom css:

table.table thead>tr>th.sorting {
    padding-right: 0;
    padding-left: 30px;
}
table.table thead .sorting:before {
    left: 0.5rem;
}
table.table thead .sorting:after {
    left: 1rem;
}

This will make the table headers look like:

[brad]

Thanks Teodor. Much appreciated.