Cell Table Header Sorting Symbol Overlap

[ayaon bakshi]

Hi,
I have implemented Cell Table in my application. The headers of my
cell table is having labels as well as sort symbols. As the size of
cell table changes dynamically on clicking. If i click the sort icon
of cell table & if the size of column is too small my sorting icon is
getting overlapped with labels.
I have created my own cell table.css. Please find the details of css
below Please suggest if there are any solution

.cellTableWidget{
font-family: Arial;
font-size: 8pt;
border-collapse: collapse;
border:1px solid #a5a698;
width: auto!important;
}

.cellTableCell {
height: 15px;
padding: 1px 5px;
white-space: nowrap;
font-family: Arial;
font-size: 8pt;
border-collapse: collapse;
color: black;
border:1px solid #a5a698;

}

.cellTableHeader {
font-weight: bold;
color: black;
font-family: Arial,Verdana;
font-size: 8pt;
white-space: nowrap;
border-collapse: collapse;
border:1px solid #a5a698;
padding-top: 1px;
padding-right: 5px;
padding-bottom: 1px;
padding-left: 5px;
}

.cellTableEvenRow {
font-family: Arial, Verdana;
font-size: 8pt;
text-align: left;
background-color: white;
border-collapse: collapse;
cursor: default;


}



.cellTableOddRow {


font-family: Arial, Verdana;
font-size: 8pt;
text-align: left;
background-color: #e5e5e5;
border-collapse: collapse;
cursor: default;


}


.cellTableSelectedRow{
font-family: Arial;
font-size: 8pt;
background-color: #FFFFCC;
white-space: nowrap;
border-collapse: collapse;
color: black;
border:1px solid #a5a698;
}


.cellTableSortableHeader {
cursor: auto;
cursor: pointer;
background: url("TransSortDisabled.png") no-repeat right center
transparent;
color: black;
font-family: Arial,Verdana;
font-size: 8pt;
font-weight: bold;
white-space: nowrap;

}