Невозможно изменить заголовок таблицы.

Question

У меня есть один сайт, который построен с codeignitor и bootstrap. У меня есть одна страница, на которой у меня есть таблица с классом ниже.

<table class="table table-striped table-bordered" >
            <thead class="thead-dark">
                <tr>
                    <th>#</th>
                    <th>Image</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Gran Id</th>

                    <th>Action</th>
                </tr>
            </thead>

Я пытаюсь изменить цвет заголовка таблицы с помощью добавления стиля в моем коде html, как показано ниже

<style>
th {
    background-color: blue;
    color: white;
} 

</style>

Но это не работает. Я много пробовал, но не смог этого сделать. Дайте мне знать, если кто-то может помочь мне решить проблему. Спасибо!

Редактировать: Решение @failedCoder меняет цвет, но бесполезно для градиентного фона. Это похоже на изображение ниже, дайте мне знать, если кто-то может улучшить его.

Спасибо!

Answer 1

Быстрое и грязное решение заключается в использовании встроенного стиля

<table class="table table-striped table-bordered" >
            <thead class="thead-dark">
                <tr>
                    // style attribute added
                    <th style="background-color: blue;color: white;">#</th>
                    <th>Image</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Gran Id</th>

                    <th>Action</th>
                </tr>
            </thead>

Вы также можете попробовать! Важно переопределить любой другой стиль элемента

th {
    background-color: blue !important;
    color: white !important;
} 

Редактировать:

Вы можете попробовать применить свой стиль ко всему первому ряду, вместо того, чтобы просто нацеливать элемент th

<table class="table table-striped table-bordered" >
            <thead class="thead-dark">
                <tr id="first-row"> // id added to first row
                    <th style="background-color: blue;color: white;">#</th>
                    <th>Image</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Gran Id</th>

                    <th>Action</th>
                </tr>
            </thead>

CSS:

  #first-row   {
      ... do your stuff here
  }