부트 스트랩 테이블 줄무늬 : 줄무늬 배경색을 어떻게 변경합니까?

부트 스트랩 테이블 줄무늬 : 줄무늬 배경색을 어떻게 변경합니까?

---

Bootstrap 클래스를 사용하면 table-striped테이블의 다른 모든 행의 배경색이 같습니다 #F9F9F9. 이 색상을 어떻게 바꿀 수 있습니까?

---

.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) 대신 (odd) 또는 (even)을 사용할 수 있습니다

---

부트 스트랩을로드 한 후 다음 CSS 스타일을 추가하십시오.

.table-striped>tbody>tr:nth-child(odd)>td, 
.table-striped>tbody>tr:nth-child(odd)>th {
   background-color: red; // Choose your own color here
 }

---

사용자 정의 스타일 시트로 스타일을 대체하거나 기본 부트 스트랩 CSS 파일을 편집하는 두 가지 옵션이 있습니다. 나는 전자를 선호합니다.

부트 스트랩 후에 사용자 정의 스타일을 연결해야합니다.

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

에 custom.css

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

---

Bootstrap 3을 사용하는 경우 Florin의 방법을 사용하거나 사용자 정의 CSS 파일을 사용할 수 있습니다.

처리 된 CSS 파일 대신 Bootstrap less source를 사용하는 경우에서 직접 변경할 수 있습니다 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했지만 중요하지 않은 것 같습니다.

다음과 같습니다.

---

부트 스트랩 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;
}

짝수 행의 색을 변경하려면 '짝수'를 사용하고 홀수 행의 색을 변경하려면 'odd'를 사용하십시오.

---

실제로 색상을 반전 시키려면 "홀수"행을 흰색으로 만들고 "색상"행을 원하는 색상으로 만드는 규칙을 추가해야합니다.

참고 URL : https://stackoverflow.com/questions/20825211/bootstrap-table-striped-how-do-i-change-the-stripe-background-colour