0

I've been trying to style the table header in Bootgrid and have only had limited success. I'm using the below code and the background color of the table header updates just fine. However, the text color of the header does not change. My classes below relate to the following:

.bg-gray { background-color: #9e9e9e !important; }
.c-white { color: #fff !important; }

<table id="data-table-selection" class="table table-hover table-bordered">
    <thead class="bg-gray c-white">
        <tr>
            <th data-column-id="id" data-type="numeric" data-identifier="true">ID</th>
            <th data-column-id="name" data-order="asc">Name</th>
            <th data-column-id="address" data-sortable="false">Physical Address</th>
            <th data-column-id="state" >Country</th>
        </tr>
    </thead>
</table>

I'm just wondering if I'm missing something or there's some issue with styling the header in bootgrid? Really appreciate any help!

Jason
  • 1,105
  • 3
  • 16
  • 30
  • 1
    looking at some of the demos on the jquery bootgrid website i noticed that the header text is usually wrapped in an anchor tag `a` or the text exists in the `span` tag with a class. You should view your source and see if this is happening there. Something else to look at is if the CSS is being prefixed with an ID or different class tag. for example `#data-table-selection th { color: red; }` Then you can match and overwrite that class with your own. – crazymatt Apr 02 '19 at 19:05
  • @crazymatt The anchor tag is what was getting me! Thanks for the fresh set of eyes! – Jason Apr 02 '19 at 20:04
  • glad you got it working – crazymatt Apr 03 '19 at 15:12

0 Answers0