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

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) 대신 (홀수) 또는 (짝수)를 사용할 수 있습니다.

Bootstrap을로드 한 후 다음 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
 }

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

처리 된 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;
    }

이 바둑판 패턴 (지브라 스트라이프의 하위 집합)이 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했지만 중요하지 않은 것 같습니다.

다음과 같이 보입니다.

Bootstrap 4에서 bootstrap.cssfor 에서 담당하는 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);
}

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

스트라이프 순서를 변경하는 가장 쉬운 방법 :

테이블 tr 태그 앞에 공백 tr 을 추가하십시오 .