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

Ответ 1

.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)

Ответ 2

Добавьте следующий стиль 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
 }

Ответ 3

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

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

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

В custom.css

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

Ответ 4

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

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

Найдите что-то вроде:

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

Ответ 5

Я нашел этот шаблон шахматной доски (как подмножество полосы зебры) приятным способом отображения таблицы с двумя столбцами. Это написано с использованием 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, но, похоже, не имеет значения.

Похож:

Ответ 6

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

Ответ 7

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