Thay thế màu hàng bảng bằng CSS?

462

Tôi đang sử dụng một bảng với màu hàng thay thế với điều này.

tr.d0 td {
  background-color: #CC9999;
  color: black;
}
tr.d1 td {
  background-color: #9999CC;
  color: black;
}

<table>
  <tr class="d0">
    <td>One</td>
    <td>one</td>
  </tr>
  <tr class="d1">
    <td>Two</td>
    <td>two</td>
  </tr>
</table>

Mở rộng đoạn trích

Ở đây tôi đang sử dụng lớp cho tr, nhưng tôi chỉ muốn sử dụng cho table. Khi tôi sử dụng lớp cho bảng hơn điều này áp dụng trthay thế.

Tôi có thể viết HTML của mình như thế này bằng CSS không?

<table class="alternate_color">
    <tr><td>One</td><td>one</td></tr>
    <tr><td>Two</td><td>two</td></tr>
    </table>

Làm cách nào để tạo các hàng có "sọc ngựa vằn" bằng CSS?

html css html-table

— Kali Charan Rajput
nguồn

1

Tôi đã tạo một bản demo bằng cách sử dụng tất cả các mẫu có thể có cho nth-child () - xengravity.com/demo/nth-child

— xengravity vào

760

$(document).ready(function()
{
  $("tr:odd").css({
    "background-color":"#000",
    "color":"#fff"});
});

tbody td{
  padding: 30px;
}

tbody tr:nth-child(odd){
  background-color: #4C8BF5;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>13</td>
</tr>
</tbody>
</table>

Mở rộng đoạn trích

Có một bộ chọn CSS, thực sự là một bộ chọn giả, được gọi là nth-child. Trong CSS thuần, bạn có thể làm như sau:

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

Lưu ý: Không hỗ trợ trong IE 8.

Hoặc, nếu bạn có jQuery:

$(document).ready(function()
{
  $("tr:even").css("background-color", "#000000");
});

— Russell Dias
nguồn

cũng có thể thay đổi màu siêu liên kết của các hàng thay thế. Tôi muốn màu siêu liên kết khác nhau cho hàng chẵn và màu khác cho lẻ. Cảm ơn

— عثمان غني

4

Câu trả lời chính xác! Nhưng chỉ để biết thông tin, có một bộ chọn CSS khác có thể được sử dụng tức là. tr:nth-of-type(odd/even)

— Nikhil Nanjappa

2

@ عثمانغني: Vâng, bạn sẽ làmtr:nth-child(even) a

— Gerard

1

Không hoạt động nếu bạn viết html của bạn một cách linh hoạt. Sau đó, bạn cần thêm các lớp vào các hàng.

— erik

Năm 2019: Đây không còn là giải pháp tốt nhất. Sử dụng CSS thuần túy .

— Chiramisu

158

Bạn có lớp :nth-child()giả:

table tr:nth-child(odd) td{
    ...
}
table tr:nth-child(even) td{
    ...
}

Trong những ngày đầu hỗ trợ trình duyệt:nth-child() của nó là loại người nghèo. Đó là lý do tại sao thiết lập trở thành một kỹ thuật phổ biến như vậy. Vào cuối năm 2013, tôi rất vui khi nói rằng IE6 và IE7 cuối cùng đã chết (hoặc đủ bệnh để ngừng chăm sóc) nhưng IE8 vẫn ở quanh - rất may, đó là ngoại lệ duy nhất.class="odd"

— Álvaro González
nguồn

3

Câu trả lời ưa thích vì nó không áp dụng CSS cho tiêu đề

— Mike

Xin chào, điều này đã muộn một vài năm nhưng những gì về việc thêm một lớp đã chọn với màu bg với jqeury vào hàng của bảng khi nhấp vào. Tôi nhận thấy rằng lớp bg màu giả thứ n-con ghi đè khi bạn thêm lớp "được chọn" với jqeury

— dutchkillsg

@dutchkillsg Đó dường như là một câu hỏi hoàn toàn mới thay vì bình luận cho câu trả lời của tôi ...

— Álvaro González

Đối với "sọc ngựa vằn" (tức là dọc), chỉ cần trao đổi tr:nth-child(odd)với td:nth-of-type(odd). Lưu ý rằng trong trường hợp này, bạn đang áp dụng một lớp giả khác cho các phần tử tdchứ không phải là trcác phần tử.

— Chiramisu

36

Chỉ cần thêm đoạn mã sau vào mã html của bạn (bỏ qua <head>) và bạn đã hoàn thành.

HTML:

<style>
      tr:nth-of-type(odd) {
      background-color:#ccc;
    }
</style>

Dễ dàng hơn và nhanh hơn các ví dụ jQuery.

— bmich72
nguồn

Đây phải là câu trả lời được chấp nhận. Càng xa càng tốt, CSS nên xử lý kiểu dáng, trong khi javascript có thể được sử dụng để xử lý các vấn đề khác.

— Tormod Haugene

Tôi không làm html hàng ngày. #cccTôi dường như không phải là một mã màu hợp lệ. Bạn có thể giải thích? Cảm ơn.

— tommy.carstensen

1

@ tommy.carstensen, nó được gọi là "dạng thập lục phân". Về cơ bản #cccđược mở rộng thành #cccccc, có nghĩa là mỗi màu RGB có giá trị thập lục phân cchoặc giá trị thập phân 204(nghĩa là rgb(204, 204, 204)). Đọc thêm về nó ở đây -> en.wikipedia.org/wiki/Web_colors#Shorthand_hexadecimal_form

— Nick Grealy

Không hoạt động trên Chrome Phiên bản 78.0.3904.108

— IloidiumPu36

13

Tôi có thể viết html như thế này bằng css không?

Có, bạn có thể nhưng sau đó bạn sẽ phải sử dụng :nth-child()bộ chọn giả (mặc dù có hỗ trợ hạn chế):

table.alternate_color tr:nth-child(odd) td{
   /* styles here */
}
table.alternate_color tr:nth-child(even) td{
   /* styles here */
}

— Sarfraz
nguồn

13

Chúng ta có thể sử dụng các quy tắc CSS và thậm chí lẻ và phương pháp jQuery cho các màu hàng thay thế

Sử dụng CSS

table tr:nth-child(odd) td{
           background:#ccc;
}
table tr:nth-child(even) td{
            background:#fff;
}

Sử dụng jQuery

$(document).ready(function()
{
  $("table tr:odd").css("background", "#ccc");
  $("table tr:even").css("background", "#fff");
});

table tr:nth-child(odd) td{
           background:#ccc;
}
table tr:nth-child(even) td{
            background:#fff;
}

<table>
  <tr>
    <td>One</td>
    <td>one</td>
   </tr>
  <tr>
    <td>Two</td>
    <td>two</td>
  </tr>
</table>

Mở rộng đoạn trích

— Santosh Khalse
nguồn

10

Hầu hết các mã trên sẽ không hoạt động với phiên bản IE. Giải pháp hoạt động cho IE + các trình duyệt khác là đây.

   <style type="text/css">
      tr:nth-child(2n) {
             background-color: #FFEBCD;
        }
</style>

— Sriwantha Attanayake
nguồn

9

<script type="text/javascript">
$(function(){
  $("table.alternate_color tr:even").addClass("d0");
   $("table.alternate_color tr:odd").addClass("d1");
});
</script>

— Cầu nguyện Rana
nguồn

46

OK Tôi biết jQuery khá phổ biến trên trang web này nhưng bất kể bạn không nên đăng jQuery mà không cần giải thích. Kịch bản này sẽ không tự hoạt động.

— DisgruntledGoat

4

Bạn có thể sử dụng các bộ chọn nth-child (lẻ / chẵn) tuy nhiên không phải tất cả các trình duyệt ( ví dụ 6-8, ff v3.0 ) đều hỗ trợ các quy tắc này, do đó hầu hết các giải pháp đều quay trở lại một số dạng giải pháp javascript / jquery để thêm các lớp vào các hàng cho các trình duyệt không tuân thủ này để có được hiệu ứng sọc hổ.

— hình vuông màu đỏ
nguồn

3

Có một cách khá dễ dàng để làm điều này trong PHP, nếu tôi hiểu truy vấn của bạn, tôi giả sử rằng bạn viết mã bằng PHP và bạn đang sử dụng CSS và javascript để tăng cường đầu ra.

Đầu ra động từ cơ sở dữ liệu sẽ mang một vòng lặp for để lặp qua các kết quả sau đó được tải vào bảng. Chỉ cần thêm một cuộc gọi chức năng như thế này:

echo "<tr style=".getbgc($i).">";  //this calls the function based on the iteration of the for loop.

sau đó thêm chức năng vào trang hoặc tệp thư viện:

function getbgc($trcount)
{

$blue="\"background-color: #EEFAF6;\"";
$green="\"background-color: #D4F7EB;\"";
$odd=$trcount%2;
    if($odd==1){return $blue;}
    else{return $green;}

}

Bây giờ, điều này sẽ thay thế linh hoạt giữa các màu tại mỗi hàng của bảng mới được tạo.

Nó dễ dàng hơn nhiều so với việc nhầm lẫn với CSS không hoạt động trên tất cả các trình duyệt.

Hi vọng điêu nay co ich.

— dấu
nguồn

cảm ơn @mark. Nó không sửa chữa trang web đó sẽ ở dạng PHP, .net hoặc HTML đơn giản.

— Kali Charan Rajput