Bảng Bootstrap sọc: Làm cách nào để thay đổi màu nền sọc?

Với lớp Bootstrap table-striped, mọi hàng khác trong bảng của tôi có màu nền bằng #F9F9F9. Làm cách nào để thay đổi màu này?

.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
   background-color: red;
}

thay đổi dòng này trong bootstrap.css hoặc bạn có thể sử dụng (lẻ) hoặc (chẵn) thay vì (2n + 1)

Thêm kiểu CSS sau khi tải 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
 }

Nếu bạn đang sử dụng Bootstrap 3, bạn có thể sử dụng phương pháp của Florin hoặc sử dụng tệp CSS tùy chỉnh.

Nếu bạn sử dụng Bootstrap ít nguồn hơn thay vì các tệp css đã xử lý, bạn có thể trực tiếp thay đổi nó trong bootstrap/less/variables.less.

Tìm một cái gì đó như:

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

Bạn có hai tùy chọn, hoặc bạn ghi đè các kiểu bằng một biểu định kiểu tùy chỉnh hoặc bạn chỉnh sửa tệp css bootstrap chính. Tôi thích cái trước hơn.

Các kiểu tùy chỉnh của bạn nên được liên kết sau bootstrap.

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

Trong custom.css

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

Không tùy chỉnh CSS bootstrap của bạn bằng cách chỉnh sửa trực tiếp tệp CSS bootstrap mà thay vào đó, tôi khuyên bạn nên sao chép CSS bootstrap và lưu chúng vào một thư mục CSS khác và ở đó bạn có thể tùy chỉnh hoặc chỉnh sửa các kiểu phù hợp với nhu cầu của mình.

.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;
}

Sử dụng 'chẵn' để thay đổi màu của các hàng chẵn và sử dụng 'lẻ' để thay đổi màu của các hàng lẻ.

Xóa sọc bảng. Nó ghi đè nỗ lực của bạn để thay đổi màu hàng.

Sau đó, làm điều này trong css

   tr:nth-child(odd) {
    background-color: lightskyblue;
    }

   tr:nth-child(even) {
    background-color: lightpink;
    }

    th {
       background-color: lightseagreen;
    }

Tôi thấy mẫu bàn cờ này (như một tập hợp con của sọc ngựa vằn) là một cách dễ chịu để hiển thị bảng hai cột. Điều này được viết bằng LESS CSS và khóa tất cả các màu khỏi màu cơ bản.

@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%); }
}

Lưu ý rằng tôi đã bỏ .table-striped, nhưng dường như không quan trọng.

Giống như:

Với Bootstrap 4, cấu hình css có trách nhiệm trong bootstrap.csscho .table-stripedlà:

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

Đối với một giải pháp rất đơn giản, tôi chỉ cần sao chép nó vào custom.csstệp của mình và thay đổi các giá trị của background-color, để bây giờ tôi có bóng màu xanh lam nhạt huyền ảo hơn:

.table-striped tbody tr:nth-of-type(odd) {
  background-color:  rgba(72, 113, 248, 0.068);
}

Nếu bạn thực sự muốn đảo ngược màu sắc, bạn nên thêm quy tắc làm cho các hàng "lẻ" có màu trắng cũng như làm cho các hàng "chẵn" bất kỳ màu nào bạn muốn.

Cách dễ nhất để thay đổi thứ tự sọc:

Thêm trống tr trước thẻ tr bảng của bạn.