ลายตาราง Bootstrap: ฉันจะเปลี่ยนสีพื้นหลังของแถบได้อย่างไร?

ด้วยคลาส 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)

เพิ่มสไตล์ 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 คุณสามารถใช้วิธีการของ Florin หรือใช้ไฟล์ CSS ที่กำหนดเอง

หากคุณใช้แหล่งที่มาน้อยกว่า Bootstrap แทนการประมวลผลไฟล์ css คุณสามารถเปลี่ยนได้โดยตรงในรูปแบบbootstrap/less/variables.less.

ค้นหาสิ่งที่ชอบ:

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

คุณมีสองตัวเลือกไม่ว่าคุณจะแทนที่สไตล์ด้วยสไตล์ชีตที่กำหนดเองหรือคุณแก้ไขไฟล์ css bootstrap หลัก ฉันชอบอดีตมากกว่า

สไตล์ที่กำหนดเองของคุณควรเชื่อมโยงหลังจาก bootstrap

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

ใน custom.css

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

อย่าปรับแต่ง CSS bootstrap ของคุณโดยการแก้ไขไฟล์ bootstrap CSS โดยตรง แต่ขอแนะนำให้คัดลอกและวาง bootstrap 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;
    }

ฉันพบว่ารูปแบบกระดานหมากรุกนี้ (เป็นส่วนย่อยของแถบม้าลาย) เป็นวิธีที่ดีในการแสดงตารางสองคอลัมน์ สิ่งนี้เขียนโดยใช้ 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แต่ดูเหมือนจะไม่สำคัญ

ดูเหมือนกับ:

ด้วยเงินทุนที่ 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);
}

หากคุณต้องการกลับสีจริง ๆ คุณควรเพิ่มกฎที่ทำให้แถว "คี่" เป็นสีขาวและทำให้แถว "คู่" เป็นสีที่คุณต้องการ

วิธีที่ง่ายที่สุดในการเปลี่ยนลำดับของลาย:

เพิ่มช่องว่าง trก่อนแท็ก tr ตารางของคุณ