ฉันสามารถระบายสีคอลัมน์ในตารางโดยใช้ CSS โดยไม่ต้องระบายสีเซลล์แต่ละเซลล์ได้หรือไม่

121

มีวิธีการลงสีช่วงของคอลัมน์จนสุด ดูตัวอย่างเริ่มต้นด้านล่าง:

<table border="1">
  <tr>
    <th>Motor</th>
    <th colspan="3">Engine</th>
    <th>Car</th>
    <th colspan="2">Body</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>7</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>
ขยายข้อมูลโค้ด

และฉันกำลังมองหาวิธีที่ดีกว่า (โค้ดน้อยกว่าสีที่ไม่ใช่สีแต่ละสี) ในการลงสีตัวอย่างเช่นช่วง "Engine" และ "Body" รวมถึงเซลล์ทั้งหมดที่อยู่ข้างใต้ใน #DDD

<style>
  .color {
    background-color: #DDD
  }
</style>
<table border="1">
  <tr>
    <th>Motor</th>
    <th colspan="3" class="color">Engine</th>
    <th>Car</th>
    <th colspan="2" class="color">Body</th>
  </tr>
  <tr>
    <td>1</td>
    <td class="color">2</td>
    <td class="color">3</td>
    <td class="color">4</td>
    <td>5</td>
    <td class="color">6</td>
    <td class="color">7</td>
  </tr>
  <tr>
    <td>7</td>
    <td class="color">1</td>
    <td class="color">2</td>
    <td class="color">3</td>
    <td>4</td>
    <td class="color">5</td>
    <td class="color">6</td>
  </tr>
</table>
ขยายข้อมูลโค้ด

html  css 
— เดนนิส
แหล่งที่มา
20
@zipzit: ไม่มีอะไรผิดปกติกับตารางหากคุณต้องการตารางนั่นคือถ้าข้อมูลเป็นตารางในลักษณะ (เช่นตารางผลิตภัณฑ์ที่มีราคา) การวิจารณ์ตารางนั้นไม่เห็นด้วยกับการใช้เป็นเครื่องมือจัดวาง
— sleske
5
สงสัยว่าสิ่งนี้เข้าสู่ Hot Network Questions ได้อย่างไร
— Mr. Alien
มีการถามเมื่อวานนี้และ ณ ตอนนี้มี 24 โหวตเพิ่มขึ้นสำหรับ Q และ 43 ใน A และคำตอบที่ได้รับการยอมรับคือและยังคงได้รับการโหวตอย่างบ้าคลั่ง
— Dennis
2
ผู้คนชอบเรียนรู้สิ่งที่พวกเขาไม่รู้ไม่ว่าจะเป็นความไม่ชอบมาพากลของการแยกวิเคราะห์หมายเลข jQuery หรือแท็ก / แนวคิด HTML ที่ทำสิ่งที่เป็นระเบียบพวกเขาไม่รู้ :)
— Dennis
1
@canon heh ใช่ยังไงก็ได้คำตอบที่ดี ...
— Mr. Alien

คำตอบ:

167

ใช่คุณสามารถ ... โดยใช้<col>องค์ประกอบ:

.grey {
  background-color: rgba(128,128,128,.25);
}
.red {
  background-color: rgba(255,0,0,.25);
}
.blue {
  background-color: rgba(0,0,255,.25);
}
<table>
  <colgroup>
    <col class="grey" />
    <col class="red" span="3" />
    <col class="blue" />
  </colgroup>
  <thead>
    <tr>
      <th>#</th>
      <th colspan="3">color 1</th>
      <th>color 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>red</td>
      <td>red</td>
      <td>red</td>
      <td>blue</td>
    </tr>
    <tr>
      <th>2</th>
      <td>red</td>
      <td>red</td>
      <td>red</td>      
      <td>blue</td>
    </tr>
  </tbody>
</table>
ขยายข้อมูลโค้ด

หมายเหตุ : คุณสามารถใช้spanแอตทริบิวต์เพื่อทำให้คำนิยาม col ใช้กับคอลัมน์ได้มากกว่าหนึ่งคอลัมน์
ดูเพิ่มเติม :<colgroup>

— ศีล
แหล่งที่มา
10
โปรดทราบว่าคุณจะต้อง<col span="3" />ใช้คอลัมน์ที่ขยาย
— Niet the Dark Absolute
มันค่อนข้างไม่มีจุดหมายที่จะใช้colgroupที่มีคอลัมน์ทั้งหมด
— Jukka K. Korpela
14
@ JukkaK.Korpela ได้รับการแยกวิเคราะห์ในลักษณะนั้นไม่ว่าคุณจะระบุหรือไม่<tbody>ก็ตาม ฉันต้องการที่จะระบุ
— ศีล
ฉันเห็นว่าการใช้colแท็กนั้นไม่ใช่เรื่องธรรมดา แต่ฉันใช้เสมอสำหรับความกว้างของคอลัมน์
— Koen
3
ในกรณีที่คนอื่นอยากรู้อยากเห็นว่าทำไมงานนี้หรือซึ่งคุณสมบัติ CSS สามารถนำมาใช้ในคอลัมน์ส่วนที่เกี่ยวข้องของ CSS 2.1 สเปคเป็น17.3และ17.5.1
— ทำบุญ
18

คุณสามารถใช้nth-childตัวเลือกสำหรับสิ่งนั้น:

tr td:nth-child(2),
tr td:nth-child(3) {
  background: #ccc;
}
<table>
  <tr>
    <th colspan="2">headline 1</th>
    <th>headline 2</th>
  </tr>
  <tr>
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
  </tr>
  <tr>
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
  </tr>
  <tr>
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
  </tr>
</table>
ขยายข้อมูลโค้ด

— Markus Kottländer
แหล่งที่มา
1
การจัดแต่งทรงผมcolเองจะดีกว่าวิธีนี้ (สะอาดและเร็วขึ้น)
— tomasz86
9

โดยทั่วไปแล้วจะง่ายที่สุดในการจัดรูปแบบเซลล์ (ตามคอลัมน์หากต้องการ) แต่สามารถจัดสไตล์คอลัมน์ได้หลายวิธี วิธีง่ายๆวิธีหนึ่งคือการรวมคอลัมน์ในcolgroupองค์ประกอบและตั้งค่ารูปแบบ ตัวอย่าง:

<style>
.x {
    background-color: #DDD
}
</style>
<table border="1">
<col>
<colgroup class=x>
  <col>
  <col>
  <col>
</colgroup>
<col>
<colgroup class=x>
  <col>
  <col>
</colgroup>
  <tr>
    <th>Motor</th>
    <th colspan="3" class="color">Engine</th>
    <th>Car</th>
    <th colspan="2" class="color">Body</th>
  </tr>
  <tr>
    <td>1</td>
    <td class="color">2</td>
    <td class="color">3</td>
    <td class="color">4</td>
    <td>5</td>
    <td class="color">6</td>
    <td class="color">7</td>
  </tr>
  <tr>
    <td>7</td>
    <td class="color">1</td>
    <td class="color">2</td>
    <td class="color">3</td>
    <td>4</td>
    <td class="color">5</td>
    <td class="color">6</td>
  </tr>
</table>
ขยายข้อมูลโค้ด

— จั๊กกะ.. ก.. เปล่า
แหล่งที่มา
1
หากcolองค์ประกอบแต่ละรายการภายในcolgroups ไม่จำเป็นต้องจัดสไตล์ทีละรายการคุณยังสามารถตั้งค่าspanแอตทริบิวต์ด้วยcolgroupตัวมันเอง - <colgroup span="2">- แทนที่จะวางcolองค์ประกอบไว้ข้างใน
— misterManSam
5

คุณสามารถใช้ CSS3: http://jsfiddle.net/snuggles08/bm98g8v8/

<style>
  .table td:nth-of-type(1) {
    background: red;
  }
  .table td:nth-of-type(5) {
    background: blue;
  }
  .table td:nth-of-type(3) {
    background: green;
  }
  .table td:nth-of-type(7) {
    background: lime;
  }
  .table td:nth-of-type(2) {
    background: skyblue;
  }
  .table td:nth-of-type(4) {
    background: darkred;
  }
  .table td:nth-of-type(6) {
    background: navy;
  }
</style>
Styled table:
<table border="1" class="table">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>7</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </tbody>
</table>
<hr>Unstyled table:
<table border="1" class="table2">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>7</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </tbody>
</table>
ขยายข้อมูลโค้ด

— leo60228
แหล่งที่มา
5

ฉันจะใช้nth-childคลาสหลอก css สำหรับสิ่งนี้:

tr td:nth-child(2), tr th:nth-child(2), tr td:nth-child(3), tr td:nth-child(4), tr th:nth-child(4), tr td:nth-child(6), tr td:nth-child(7){
    background-color: #DDD;
}

แสดงข้อมูลโค้ด

— Howard Renollet
แหล่งที่มา
5

การใช้งานต่อไปนี้เป็นตัวเลือกลูกที่ n และควรใช้งานได้ ...

<style type="text/css">
    th:nth-child(2),
    th:nth-child(4)
    {
        background-color: rgba(255, 0, 0, 1.0);
    }

    td:nth-child(2), 
    td:nth-child(3),
    td:nth-child(4),
    td:nth-child(6),
    td:nth-child(7)
    {
        background-color: rgba(255, 0, 0, 0.5);
    }
</style>
— กินการนอนหลับรหัส
แหล่งที่มา
คุณอาจต้องการ>ระหว่าง tr และ td เนื่องจากคุณประสบปัญหาในการเลือก tds เฉพาะภายใน trs ภายในตารางเท่านั้น ... (คำนึงถึงกลุ่มตาราง)
— ANeves
ขอบคุณสำหรับคำตอบนี่คือทางออกที่แตกต่าง
— Mohammad Kermani
นี่คือการโอเวอร์คิล การระบุมากเกินไปจะไม่ดีต่อประสิทธิภาพ table tr tdซ้ำซ้อนเป็นtds อยู่เสมอภายในและtr table
— tomasz86
4

เวอร์ชันของฉันโดยใช้นิพจน์ที่ n-child:

การใช้แนวคิด CSS ของกฎการเรียงซ้อนเพื่อระบายสีเซลล์ก่อนจากนั้นจึงยกเลิกการระบายสีเซลล์ที่ฉันต้องการให้โปร่งใส ตัวเลือกแรกจะเลือกเซลล์ทั้งหมดหลังจากเซลล์แรกและเซลล์ที่สองจะเลือกเซลล์ที่ห้าให้โปร่งใส

<style type="text/css">
  /* colored */
  td:nth-child(n+2) { background-color: #ddd }
  /* uncolored */
  td:nth-child(5) { background-color: transparent }
</style>

<table border="1">
  <tr>
    <th>Motor</th>
    <th colspan="3">Engine</th>
    <th>Car</th>
    <th colspan="2">Body</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>7</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>
ขยายข้อมูลโค้ด

ตรวจสอบข้อมูลอ้างอิงที่น่าสนใจนี้: http://learn.shayhowe.com/advanced-html-css/complex-selectors/

— Marcs
แหล่งที่มา
1

นี่เป็นคำถามเก่าที่มีคำตอบดีๆมากมาย แค่ต้องการเพิ่ม-nและnth-last-childตัวเลือกที่ยังไม่ได้กล่าวถึง มีประโยชน์เมื่อใช้ CSS กับหลายคอลัมน์ แต่อาจไม่ทราบจำนวนคอลัมน์ก่อนการจัดรูปแบบหรือมีหลายตารางที่มีความกว้างต่างกัน

/* Select the first two */
table tr td:nth-child(-n + 2) {
  background-color: lightblue;
}

/* Select all but the first two */
table tr td:not(:nth-child(-n + 2)) {
    background-color:lightgreen;
}

/* Select last two only */
table tr td:nth-last-child(-n + 2) {
  background-color:mistyrose;
}

/* Select all but the last two */
table tr td:not(:nth-last-child(-n + 2)) {
    background-color:yellow;
}

jsFiddle: https://jsfiddle.net/3rpf5oht/2/

— elPastor
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.