Таблица начальной загрузки с полосами: как изменить цвет фона полосы?

С классом Bootstrap table-stripedкаждая вторая строка в моей таблице имеет цвет фона, равный #F9F9F9. Как я могу изменить этот цвет?

.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
   background-color: red;
}

измените эту строку в bootstrap.css, или вы можете использовать (нечетное) или (четное) вместо (2n + 1)

Добавьте следующий стиль CSS после загрузки Bootstrap:

.table-striped>tbody>tr:nth-child(odd)>td, 
.table-striped>tbody>tr:nth-child(odd)>th {
   background-color: red; // Choose your own color here
 }

Если вы используете Bootstrap 3, вы можете использовать метод Флорина или собственный файл CSS.

Если вы используете исходный код Bootstrap less вместо обработанных файлов css, вы можете напрямую изменить его в bootstrap/less/variables.less.

Найдите что-нибудь вроде:

//** Background color used for `.table-striped`.
@table-bg-accent:               #f9f9f9;

У вас есть два варианта: либо вы переопределяете стили с помощью настраиваемой таблицы стилей, либо редактируете основной файл начальной загрузки css. Я предпочитаю первое.

Ваши пользовательские стили должны быть связаны после начальной загрузки.

<link rel="stylesheet" src="bootstrap.css">
<link rel="stylesheet" src="custom.css">

В custom.css

.table-striped>tr:nth-child(odd){
   background-color:red;
}

Не настраивайте свой загрузочный CSS, напрямую редактируя файл загрузочного CSS. Вместо этого я предлагаю скопировать вставку загрузочного CSS и сохранить их в другой папке CSS, где вы можете настроить или отредактировать стили, подходящие для ваших нужд.

.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
  background-color: #e08283;
  color: white;
}
.table-striped>tbody>tr:nth-child(even)>td,
.table-striped>tbody>tr:nth-child(even)>th {
  background-color: #ECEFF1;
  color: white;
}

Используйте «even» для изменения цвета четных строк и используйте «odd» для изменения цвета нечетных строк.

Delete table-striped Его попытки изменить цвет строки отменяются.

Затем сделайте это в css

   tr:nth-child(odd) {
    background-color: lightskyblue;
    }

   tr:nth-child(even) {
    background-color: lightpink;
    }

    th {
       background-color: lightseagreen;
    }

Я обнаружил, что этот шаблон шахматной доски (как подмножество полосы зебры) является приятным способом отображения таблицы из двух столбцов. Это написано с использованием LESS CSS, и все цвета не совпадают с основным цветом.

@base-color: #0000ff;
@row-color: lighten(@base-color, 40%);    
@other-row: darken(@row-color, 10%);

tbody {
    td:nth-child(odd) { width: 45%; }
    tr:nth-child(odd) > td:nth-child(odd) {
        background: darken(@row-color, 0%); }
    tr:nth-child(odd) > td:nth-child(even) {
        background: darken(@row-color, 7%); }
    tr:nth-child(even) > td:nth-child(odd) {
        background: darken(@other-row, 0%); }
    tr:nth-child(even) > td:nth-child(even) {
        background: darken(@other-row, 7%); }
}

Обратите внимание, что я уронил .table-striped, но это не имеет значения.

Выглядит как:

В Bootstrap 4 ответственная конфигурация css bootstrap.cssдля .table-striped:

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

Для очень простого решения я просто скопировал его в свой custom.cssфайл и изменил значения background-color, так что теперь у меня есть более красивый голубой оттенок:

.table-striped tbody tr:nth-of-type(odd) {
  background-color:  rgba(72, 113, 248, 0.068);
}

Если вы действительно хотите изменить цвета, вы должны добавить правило, которое делает «нечетные» строки белыми, а также делает «четные» строки любого цвета, который вы хотите.

Самый простой способ изменить порядок полос:

Добавьте пустой tr перед тегами таблицы tr.