Bootstrap table striped: как изменить цвет фона полосы?

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

92
css html-table twitter-bootstrap

8 ответов

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

90

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

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

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

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

на custom.css

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

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

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

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

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

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

похоже,: enter image description here

2

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

2

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

0
.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;
}

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

0