สีแถวของตารางตารางอื่นโดยใช้ CSS?

462

ฉันกำลังใช้ตารางที่มีสีแถวสำรองด้วยสิ่งนี้

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>

ขยายตัวอย่างข้อมูล

นี่ฉันใช้ชั้นแต่ผมต้องการที่จะใช้เฉพาะสำหรับtr tableเมื่อฉันใช้ชั้นเรียนสำหรับตารางกว่านี้นำไปใช้เป็นtrทางเลือก

ฉันสามารถเขียน HTML แบบนี้โดยใช้ CSS ได้ไหม

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

ฉันจะทำให้แถวมี "ลายทางม้าลาย" โดยใช้ CSS ได้อย่างไร

html css html-table

— กาลีจรัญราชพุฒิ
แหล่งที่มา

1

ฉันสร้างตัวอย่างโดยใช้รูปแบบที่เป็นไปได้ทั้งหมดสำหรับ nth-child () - xengravity.com/demo/nth-child

— xengravity

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>

ขยายตัวอย่างข้อมูล

มีตัวเลือก CSS ซึ่งเป็นตัวเลือกหลอกที่เรียกว่า nth-child จริงๆ ใน CSS บริสุทธิ์คุณสามารถทำสิ่งต่อไปนี้:

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

หมายเหตุ:ไม่รองรับ IE 8

หรือถ้าคุณมี jQuery:

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

— รัสเซลเดียส
แหล่งที่มา

เป็นไปได้หรือไม่ที่จะเปลี่ยนสีไฮเปอร์ลิงก์ของแถวอื่น ฉันต้องการสีไฮเปอร์ลิงก์ที่แตกต่างกันสำหรับแถวคู่และสีอื่นสำหรับคี่ ขอบคุณ

— عثمانغني

4

คำตอบที่ดี! แต่สำหรับข้อมูลมีตัวเลือก CSS อีกตัวหนึ่งซึ่งสามารถใช้ได้เช่น tr:nth-of-type(odd/even)

— Nikhil Nanjappa

2

@ عثمانغني: ใช่คุณจะทำtr:nth-child(even) a

— เจอราร์ด

1

ไม่ทำงานหากคุณเขียน html แบบไดนามิก จากนั้นคุณต้องเพิ่มคลาสลงในแถว

— erik

ในปี 2019: นี่ไม่ใช่ทางออกที่ดีที่สุดอีกต่อไป ใช้CSS บริสุทธิ์

— Chiramisu

158

คุณมี:nth-child()คลาสหลอก:

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

ในช่วงแรก ๆ ของ:nth-child()การสนับสนุนเบราว์เซอร์มันแย่มาก นั่นเป็นเหตุผลที่การตั้งค่าclass="odd"เป็นเทคนิคทั่วไป ในช่วงปลายปี 2013 ฉันดีใจที่จะบอกว่า IE6 และ IE7 ในที่สุดก็ตาย (หรือป่วยมากพอที่จะหยุดดูแล) แต่ IE8 ยังคงอยู่ - ขอบคุณเป็นข้อยกเว้นเพียงอย่างเดียว

— ÁlvaroGonzález
แหล่งที่มา

3

คำตอบที่ต้องการเนื่องจากไม่ใช้ CSS กับส่วนหัว

— Mike

สวัสดีนี่เป็นเวลาไม่กี่ปีที่ผ่านมา แต่สิ่งที่เกี่ยวกับการเพิ่มคลาสที่เลือกด้วย bg-color ที่มี jqeury ไปยังแถวของตารางเมื่อคลิก ฉันสังเกตเห็นว่า: nth-child pseudo class bg-color overrides เมื่อคุณเพิ่มคลาส "ที่เลือก" ด้วย jqeury

— dutchkillsg

@dutchkillsg ที่ดูเหมือนจะเป็นคำถามใหม่มากกว่าที่จะแสดงความคิดเห็นกับคำตอบของฉัน ...

— ÁlvaroGonzález

สำหรับ "ลายม้าลาย" (คือแนวตั้ง) เพียงแลกเปลี่ยนกับtr:nth-child(odd) td:nth-of-type(odd)โปรดทราบว่าในกรณีนี้คุณกำลังใช้คลาสหลอกที่แตกต่างกับองค์ประกอบtdมากกว่า tr

— Chiramisu

36

เพียงเพิ่มสิ่งต่อไปนี้ในรหัส html ของคุณ (ภายใน<head>) และทำเสร็จแล้ว

HTML:

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

ง่ายและเร็วกว่าตัวอย่าง jQuery

— bmich72
แหล่งที่มา

นี่ควรเป็นคำตอบที่ยอมรับได้ เท่าที่เป็นไปได้ CSS ควรจัดการสไตล์ในขณะที่จาวาสคริปต์สามารถใช้ในการจัดการเรื่องอื่น ๆ

— Tormod Haugene

ฉันไม่ได้ทำ html ทุกวัน #cccดูเหมือนว่าฉันจะไม่ใช้รหัสสีที่ถูกต้อง คุณสามารถอธิบาย? ขอบคุณ

— tommy.carstensen

1

@ tommy.carstensen เรียกว่า "รูปแบบเลขฐานสิบหกแบบย่อ" โดยทั่วไป#cccได้รับการขยายไปถึง#ccccccซึ่งหมายความว่าแต่ละสี RGB มีค่าเลขฐานสิบหกccหรือค่าทศนิยม204(เช่นrgb(204, 204, 204)) อ่านเพิ่มเติมเกี่ยวกับที่นี่ -> en.wikipedia.org/wiki/Web_colors#Shorthand_hexadecimal_form

— Nick Grealy

ไม่ทำงานบน Chrome เวอร์ชัน 78.0.3904.108

— IlludiumPu36

13

ฉันจะเขียน html ของฉันแบบนี้ด้วยการใช้ css ได้ไหม

ใช่คุณสามารถ แต่แล้วคุณจะต้องใช้:nth-child()ตัวเลือกหลอก (ซึ่งมีการสนับสนุนที่ จำกัด ):

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

— sarfraz
แหล่งที่มา

13

เราสามารถใช้กฎ CSS และคี่และกฎ jQuery สำหรับสีแถวอื่น

ใช้ CSS

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

ใช้ 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>

ขยายตัวอย่างข้อมูล

— Santosh Khalse
แหล่งที่มา

10

รหัสข้างต้นส่วนใหญ่จะไม่ทำงานกับรุ่น IE วิธีแก้ปัญหาสำหรับ IE + เบราว์เซอร์อื่น ๆ คือสิ่งนี้

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

— Sriwantha Attanayake
แหล่งที่มา

9

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

— พระยารานา
แหล่งที่มา

46

ตกลงฉันรู้ว่า jQuery ค่อนข้างแพร่หลายในเว็บไซต์นี้ แต่ไม่ว่าคุณจะไม่โพสต์ jQuery โดยไม่ต้องอธิบาย สคริปต์นี้จะไม่ทำงานด้วยตัวเอง

— DisgruntledGoat

4

คุณสามารถใช้ตัวเลือก nth-child (คี่ / คู่) แต่ไม่ใช่เบราว์เซอร์ทั้งหมด ( เช่น 6-8, ff v3.0 ) สนับสนุนกฎเหล่านี้ดังนั้นทำไมโซลูชันส่วนใหญ่จึงกลับไปใช้รูปแบบของโซลูชัน javascript / jquery เพื่อเพิ่มคลาสให้กับ แถวสำหรับเบราว์เซอร์ที่ไม่ตรงตามมาตรฐานเหล่านี้เพื่อให้ได้เอฟเฟกต์ลายเสือ

— redsquare
แหล่งที่มา

3

มีวิธีที่ค่อนข้างง่ายในการทำเช่นนี้ใน PHP ถ้าฉันเข้าใจคำสั่งของคุณฉันคิดว่าคุณใช้โค้ดใน PHP และคุณใช้ CSS และ javascript เพื่อปรับปรุงผลลัพธ์

เอาต์พุตแบบไดนามิกจากฐานข้อมูลจะมีลูปสำหรับวนซ้ำผ่านผลลัพธ์ซึ่งถูกโหลดลงในตาราง เพียงเพิ่มการเรียกใช้ฟังก์ชันในลักษณะนี้:

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

จากนั้นเพิ่มฟังก์ชันลงในหน้าไฟล์หรือไลบรารี:

function getbgc($trcount)
{

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

}

ตอนนี้สิ่งนี้จะสลับกันระหว่างสีในแต่ละแถวของตารางที่สร้างขึ้นใหม่

มันง่ายกว่า messing กับ CSS ที่ไม่สามารถใช้ได้กับเบราว์เซอร์ทั้งหมด

หวังว่านี่จะช่วยได้

— เครื่องหมาย
แหล่งที่มา

ขอบคุณ @mark ไม่ได้แก้ไขไซต์นั้นใน PHP, .net หรือ HTML แบบง่าย

— Kali Charan Rajput