Css màu hàng thay thế

Tôi sẽ chỉ cho bạn một ví dụ về bảng có các hàng xen kẽ cùng với một số mã hoạt động mà bạn có thể sao chép

Nếu bạn cần nó, tôi cũng có thông tin về cách xây dựng một bảng với các cột xen kẽ

Hỗ trợ trình duyệt cho Bộ chọn con thứ N

Tất cả các trình duyệt hiện đại đều hỗ trợ bộ chọn con thứ n nhưng nó không được hỗ trợ trong Internet Explorer 8 và các phiên bản bên dưới. Với ý nghĩ đó, tôi đã thêm một khai báo css bổ sung để trong phiên bản IE cũ hơn này, tất cả các hàng của bảng sẽ có màu nền mặc định. Điều này chỉ đề phòng trường hợp bạn bị chủ nhân hiện tại của mình nguyền rủa là hỗ trợ các trình duyệt cổ xưa

Điều này cho phép bảng vẫn dễ đọc và hoạt động trực quan nhưng nó không sao chép chính xác hiệu ứng màu hàng xen kẽ có trong các trình duyệt hiện đại. Nếu điều này cực kỳ quan trọng đối với bạn thì bạn phải viết một số để đạt được hiệu quả này

Ví dụ về bảng CSS với các hàng xen kẽ

Văn bản Văn bản Văn bản Văn bản Văn bản Văn bản Văn bản Văn bản Văn bản

Mã CSS cho bảng

Để tạo bảng trên, bạn phải sử dụng tr. bộ chọn con thứ n(lẻ) để xác định tất cả các hàng lẻ trong một bảng và tr. bộ chọn thứ n (thậm chí) để xác định tất cả các hàng chẵn của bảng

Bạn có thể sao chép toàn bộ mã CSS và HTML đang hoạt động cho ví dụ về bảng từ hộp bên dưới

	TextTextText
	TextTextText
	TextTextText
	TextTextText

Các hàng trong bảng xen kẽ chỉ với CSS

Dù sao đi nữa, bây giờ khá đơn giản để tạo một bảng với các hàng màu xen kẽ chỉ bằng cách sử dụng CSS

Hỗ trợ hiện đại tốt cho tất cả các trình duyệt ngoại trừ IE8 trở xuống, hiện chiếm chưa đến 1% thị trường và vì vậy bạn có thể dễ dàng cung cấp cho chúng một giải pháp thay thế có thể đọc được bằng mắt

Khi chúng tôi có các bảng lớn với nhiều dữ liệu, điều quan trọng là cung cấp khả năng đọc tốt hơn cho người dùng. Một cách để đạt được điều này là đánh dấu các hàng thay thế của bảng. Nó có thể cải thiện đáng kể khả năng đọc. Những bảng như vậy được gọi là bảng sọc ngựa vằn

Table HeaderTable HeaderTable HeaderTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cellTable cell

Để đặt màu hàng thay thế của bảng, trước tiên chúng ta phải chọn tất cả các hàng thay thế của bảng. Để làm điều đó, chúng ta có thể sử dụng bộ chọn :nth-child(). Các. bộ chọn nth-child() có thể chọn tất cả các hàng chẵn hoặc lẻ của bảng

---

1. Đánh dấu tất cả các hàng chẵn của bảng

Để đánh dấu tất cả các hàng chẵn, hãy sử dụng tr:nth-child(even). Thao tác này sẽ chọn tất cả các hàng ở các vị trí chẵn như 2, 4, 6, v.v.

Thí dụ

tr:nth-child(even){
   background: #dedede;
}

Thử ngay bây giờ

---

2. Đánh dấu tất cả các hàng lẻ của bảng

Để đánh dấu tất cả các hàng lẻ, hãy sử dụng tr:nth-child(odd). Thao tác này sẽ chọn tất cả các hàng ở các vị trí lẻ như 1, 3, 5, v.v.

Thủ thuật CSS này đã làm tôi kinh ngạc – trong nhiều năm trước khi nó được phát minh, tôi đã cẩn thận thực hiện thủ công bằng HTML hoặc sử dụng mã PHP để thay thế các dòng trong các bảng được tạo. Và bây giờ nó được tích hợp sẵn. Thật tuyệt

Thủ thuật này sử dụng CSS để tô màu các hàng dựa trên số hàng của chúng hoặc thậm chí nếu chúng là chẵn hay lẻ

Ví dụ: nếu tôi muốn đặt màu nền của cột thành màu xanh lam nhạt, tôi sẽ sử dụng đoạn mã sau

table.bluerows tr:nth-child(even) {
     background-color: #afeeee;
}

Với kết quả sau

Đây là tiêu đề bảng Đây là hàng 1 Đây là hàng 2 Đây là hàng 3 Đây là hàng 4

Lưu ý rằng điều này làm nổi bật các hàng nội dung bắt đầu bằng hàng nội dung đầu tiên. Điều này là do hàng tiêu đề bảng được tính là một hàng. Nếu bạn muốn thay đổi hành vi này, hãy thử cách sau

Một cách để cải thiện khả năng đọc của các bảng lớn là tô màu các hàng xen kẽ. Ví dụ: bảng bên dưới có nền màu xám nhạt cho các hàng chẵn và màu trắng cho các hàng lẻ. Các quy tắc cho điều đó là cực kỳ đơn giản

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

Month'94'95'96'97'98'99'00'01'02Jan141314131411111111Feb131512151512141313Mar161514171615141515Apr171617171715151616May212020212220212019Jun242325242523252324Jul292826262726252625Aug292827282827262826Sep242323262424242221Oct2022202220192022Nov1817161716151415Dec1513131413101311

Trên thực tế, CSS không chỉ cho phép cho phép xen kẽ chẵn/lẻ mà còn cho phép các khoảng tùy ý. Các từ khóa 'chẵn' và 'lẻ' chỉ là cách viết tắt tiện lợi. Ví dụ: đối với một danh sách dài, bạn có thể làm điều này

li:nth-child(5n+3) {font-weight: bold}

Điều này nói rằng mọi mục danh sách thứ 5 đều được in đậm, bắt đầu từ mục thứ 3. Nói cách khác, các mục được đánh số 3, 8, 13, 18, 23, v.v. , sẽ được in đậm

CSS nào sẽ áp dụng chính xác nền

CSS kiểu chẵn lẻ là gì?