เส้นขอบรอบองค์ประกอบ tr ไม่แสดง?


108

ดูเหมือนว่า Chrome / Firefox ไม่ทำให้เส้นขอบบนแต่มันทำให้ชายแดนถ้าเลือกเป็นtrtable tr td

ฉันจะตั้งค่าเส้นขอบบน tr ได้อย่างไร

การลองของฉันไม่ได้ผล:

table tr {
  border: 1px solid black;
}
<table>
  <tbody>
    <tr>
      <td>
        Text
      </td>
    </tr>
  </tbody>
</table>

http://jsfiddle.net/edi9999/VzPN2/

นี่เป็นคำถามที่คล้ายกัน: ตั้งค่าเส้นขอบเป็นตาราง tr ทำงานได้ทุกอย่างยกเว้น IE 6 และ 7แต่ดูเหมือนว่าจะใช้ได้ทุกที่ยกเว้น IE


2
ฉันใช้ firefox แต่ไม่เห็นเส้นขอบ
Speedysnail6

คำตอบ:


256

เพิ่มสิ่งนี้ลงในสไตล์ชีต:

table {
  border-collapse: collapse;
}

JSFiddle

สาเหตุที่มันทำงานในลักษณะนี้ได้อธิบายไว้ค่อนข้างดีในข้อกำหนด :

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

... และใหม่กว่าสำหรับcollapseการตั้งค่า:

ในโมเดลเส้นขอบแบบยุบคุณสามารถระบุเส้นขอบที่ล้อมรอบเซลล์แถวกลุ่มแถวคอลัมน์และกลุ่มคอลัมน์ทั้งหมดหรือบางส่วน


2
เหตุใดเส้นขอบจึงถูกซ่อนไว้
edi9999

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

1
@ edi9999 - ฉันแนะนำให้ใช้สไตล์ชีตรีเซ็ต ลองดูที่http://www.cssreset.com/
Black Sheep

2
คำอธิบายที่เฉพาะเจาะจงเกี่ยวกับสาเหตุที่เส้นขอบถูกซ่อนคือคำสั่งนี้ในข้อมูลจำเพาะ CSS ที่อ้างถึงซึ่งนำเสนอในรูปแบบการใช้เส้นขอบที่แยกออกมา: "แถวคอลัมน์กลุ่มแถวและกลุ่มคอลัมน์ไม่สามารถมีเส้นขอบได้ (กล่าวคือตัวแทนผู้ใช้ต้องละเว้นเส้นขอบ คุณสมบัติสำหรับองค์ประกอบเหล่านั้น)”
Jukka K. Korpela

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