Таблиця завантажувальної смуги: Як змінити колір тла смуги?
Відповіді:
.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 менше, а не оброблені файли 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;
}Використовуйте "парне" для зміни кольору парних рядків, а "непарне" - для зміни кольору непарних рядків.
Видалити смугастий стіл. Це перевищує ваші спроби змінити колір рядка.
Потім зробіть це в css
tr:nth-child(odd) {
background-color: lightskyblue;
}
tr:nth-child(even) {
background-color: lightpink;
}
th {
background-color: lightseagreen;
}Я знайшов цей шаблон контрольної дошки (як підмножину смуги зебри) приємним способом відображення двоколонної таблиці. Це написано за допомогою МЕНШЕ 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);
}