Bootstrap Table Row Selection

Question

I can't seem to get the entire row highlighted. Whatever row is the one with the sorted_1 class on it doesn't take the selected highlight when I mark it active. Even when manually setting the background on the cell when it is sorted doesn't produce a result. Any thoughts?

             <table class="table table-bordered table-hover" id="accountTable">
                <thead>
                    <tr>
                        <th style="width: 50%;">Account Name
                        </th>
                        <th style="width: 50%;">Profit Center Number
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Test Acct</td>
                        <td>XXXX99753</td>
                    </tr>
                    <tr>
                        <td>Test Acct 2</td>
                        <td>XXXX99885</td>
                    </tr>
                    <tr>
                        <td>Account 3</td>
                        <td>XXXX99885</td>
                    </tr>
                    <tr>
                        <td>Z Account</td>
                        <td>XXXX99885</td>
                    </tr>
                </tbody>
            </table>

Also, of course, calling this at the end of my script section.

$('#accountTable').dataTable();

Answer 1

table.dataTable td.sorting_1,
table.dataTable td.sorting_2,
table.dataTable td.sorting_3,
table.dataTable th.sorting_1,
table.dataTable th.sorting_2,
table.dataTable th.sorting_3 {
    background: none !important;
}

Seems that this was the issue. I'm using an internal stylesheet that is stock on these projects and it had this lovely section :/

Answer 2

Add style definition for td:

.active td {
  background: red !important;
}

also you can add this style

tr:not(.active):hover td {
  background: #e99 !important;
}

jsfiddle