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

87

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

Теги:
html-table

7 ответов

80
Лучший ответ
.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)

  • 88
    Не делай этого. В следующий раз, когда вы обновите загрузчик, вы потеряете свое пользовательское переопределение. Гораздо лучше иметь собственный CSS в отдельном файле, который вы помещаете сразу после bootstrap.css в заголовок.
  • 0
    Как бы вы изменили цвет фона для наведения здесь целой строки?
Показать ещё 6 комментариев
97

Добавьте следующий стиль 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
    Это хорошо работает: bootply.com/102887
  • 0
    хорошо работает при перезаписи цвета таблицы начальной загрузки по умолчанию. Спасибо.
Показать ещё 4 комментария
10

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

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

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

В custom.css

.table-striped>tr:nth-child(odd){
   background-color:red;
}
  • 0
    Не работал для меня Ответ от kyriakos работает очень хорошо.
  • 0
    В этом примере отсутствует тег tbody
7

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

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

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

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

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

Похож: Изображение 2408

  • 1
    еще не проверено, но выглядит потрясающе ..
1

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

0

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню