ใช้สไตล์กับแท็ก td ระดับแรกเท่านั้น


137

มีวิธีการนำสไตล์ของคลาสไปใช้กับแท็ก td เพียงระดับเดียวหรือไม่?

<style>.MyClass td {border: solid 1px red;}</style>

<table class="MyClass">
  <tr>
    <td>
      THIS SHOULD HAVE RED BORDERS
    </td>
    <td>
      THIS SHOULD HAVE RED BORDERS
      <table><tr><td>THIS SHOULD NOT HAVE ANY</td></tr></table>
    </td>
  </tr>
</table>

คำตอบ:


224

มีวิธีการนำสไตล์ของคลาสไปใช้กับแท็ก td เพียงระดับเดียวหรือไม่?

ใช่* :

.MyClass>tbody>tr>td { border: solid 1px red; }

แต่! 'การ>' เลือกโดยตรงลูกไม่ทำงานใน IE6 หากคุณต้องการรองรับเบราว์เซอร์นั้น (ซึ่งคุณน่าจะทำได้) สิ่งที่คุณทำได้คือเลือกองค์ประกอบภายในแยกจากกันและยกเลิกการตั้งค่าสไตล์:

.MyClass td { border: solid 1px red; }
.MyClass td td { border: none; }

*โปรดทราบว่าตัวอย่างแรกอ้างอิงtbodyองค์ประกอบที่ไม่พบใน HTML ของคุณ มันควรจะได้รับใน HTML ของคุณ แต่เบราว์เซอร์โดยทั่วไปมักจะตกลงกับปล่อยให้มันออกมา ... พวกเขาเพียงแค่เพิ่มไว้ในเบื้องหลัง


2
ฉันตกใจมากที่จำโลกที่เราต้องแก้จุดบกพร่องสำหรับ IE6 โพสต์นี้ทำให้หายหนาว ..
webfish

34

วิธีการใช้ CSS: first-child pseudo-class:

.MyClass td:first-child { border: solid 1px red; }

16
ไม่ได้ผล สิ่งนี้จะเลือกtdเด็กทุกคนในแผนผังเด็ก.MyClassซึ่งเป็นองค์ประกอบแรกที่มีองค์ประกอบและจะจัดสไตล์ภายในtdด้วย
Lazlo

1
วิธีนี้มีการโหวตเพิ่มขึ้นมากมายได้อย่างไร? :first-childจะไม่มีเอฟเฟกต์ที่ OP กำลังมองหาอย่างแน่นอน
plong0

8

สไตล์นี้:

table tr td { border: 1px solid red; }
td table tr td { border: none; }

ให้ฉัน:

http://img12.imageshack.us/img12/4477/borders.png นี้

อย่างไรก็ตามการใช้คลาสน่าจะเป็นแนวทางที่ถูกต้องที่นี่


การใช้คลาสในทุกองค์ประกอบ td อาจซ้ำซ้อนเล็กน้อยคุณอาจใช้คลาสในองค์ประกอบตารางที่มีจากนั้นคุณยังคงต้องยกเว้นตารางระดับที่สองนั่นคือตัวอย่างแรกของคุณถูกต้อง
thomasrutter

6

เพียงแค่สร้างตัวเลือกสำหรับตารางภายใน MyClass

.MyClass td {border: solid 1px red;}
.MyClass table td {border: none}

(หากต้องการใช้กับตารางด้านในทั้งหมดโดยทั่วไปคุณสามารถทำได้table table td)


3

ฉันต้องการตั้งค่าความกว้างของคอลัมน์แรกของตารางและฉันพบว่ามันใช้งานได้ (ใน FF7) - คอลัมน์แรกกว้าง 50px:

#MyTable>thead>tr>th:first-child { width:50px;}

มาร์กอัปของฉันอยู่ที่ไหน

<table id="MyTable">
 <thead>
  <tr>
   <th scope="col">Col1</th>
   <th scope="col">Col2</th>
  </tr>
 </thead>
 <tbody>
   ...
 </tbody>
</table>

3

ฉันคิดว่ามันจะได้ผล

.Myclass tr td:first-child{ }

 or 

.Myclass td:first-child { }

อันแรกเลือกtdแถวแรกของทุกแถวและแถวที่สองเลือกเฉพาะแถวแรกtdของหน้าหรือไม่
Joshua Pinter

@JoshuaPinter โดยพื้นฐานแล้วคุณถูกต้องเกี่ยวกับอันแรก โดยทั่วไปtd:first-childเลือกtdองค์ประกอบใด ๆที่เป็นองค์ประกอบแรกภายใต้พาเรนต์ (ไม่ว่าพาเรนต์จะเป็นอย่างไร) ข้อแรกtr td:first-childเพิ่มเงื่อนไขว่าtdต้องซ้อนอยู่ด้านล่าง a ด้วยtr(ในระดับใดก็ได้ไม่จำเป็นต้องเป็นผู้สืบทอดโดยตรง) tr > td:first-childเลือกtdที่เป็นองค์ประกอบแรกโดยตรงภายใต้tr. ในที่สุด:first-childไม่มีอะไรเกี่ยวข้องกับการแก้ปัญหาสำหรับคำถามของ OP และคำตอบนี้ไม่ถูกต้อง
plong0

2

ฉันเดาว่าคุณสามารถลอง

table tr td { color: red; }
table tr td table tr td { color: black; }

หรือ

body table tr td { color: red; }

โดยที่ 'body' เป็นตัวเลือกสำหรับผู้ปกครองของตารางของคุณ

แต่ชั้นเรียนมักจะเป็นวิธีที่ถูกต้องในการไปที่นี่

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