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

Question

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

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

515 8

css twitter-bootstrap html-table

8 ответов:

Comments

Ничего не найдено.

Florin · Accepted Answer · 2014-09-12 01:05:54

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

kyriakos · Accepted Answer · 2016-07-24 22:40:55

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

Eisa Adil · Accepted Answer · 2013-12-29 14:39:45

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

ваши пользовательские стили должны быть связаны после начальной загрузки.
<link rel="stylesheet" src="bootstrap.css">
<link rel="stylesheet" src="custom.css">
на custom.css
.table-striped>tr:nth-child(odd){
   background-color:red;
}

Lucas S. · Accepted Answer · 2014-04-18 16:31:53

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

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

найти что-то вроде:
//** Background color used for `.table-striped`.
@table-bg-accent:               #f9f9f9;

John Lehmann · Accepted Answer · 2015-03-30 16:25:22

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

похоже,:

rai · Accepted Answer · 2015-04-01 17:45:14

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

PhPGuy · Accepted Answer · 2016-01-14 00:45:42

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

sammani anuththara · Accepted Answer · 2018-09-04 10:12:34

.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 ' для изменения цвета нечетных строк.