จะตั้งค่าเส้นขอบให้กับองค์ประกอบ ‹tbody› ได้อย่างไร?

เหตุใดเส้นขอบจึงไม่แสดงรอบๆ tbody ในรายการต่อไปนี้ ฉันลอง rules="groups" แล้วเส้นขอบก็ปรากฏขึ้น แต่มีเพียงระหว่าง tbody สองส่วนเท่านั้นจึงจะยุบลง

table.sectioned tbody {
  border: 2px solid black;
  border-collapse: separate;
  border-spacing: 4px;
}
<table class="sectioned">
  <tbody>
    <tr><td colspan="2"><b>General Data</b></td></tr>
    <tr><td>Tail Number</td><td>N0809021</td></tr>
    <tr><td>Type of Ownership</td><td>personal</td></tr>
    <tr><td>Type of Aircraft</td><td>aircraft under 13,000 pounds</td></tr>
    <tr><td>Year of Manufacture</td><td>1999</td></tr>
    <tr><td>Use of Aircraft</td><td>private</td></tr>
    <tr><td>Start Date</td><td></td></tr>
    <tr><td>Policy Length</td><td>6 months</td></tr>
  </tbody>
  <tbody>
    <tr><td colspan="2"><b>Additional Aircraft Information</b></td></tr>
    <tr><td>Manufacturer</td><td></td></tr>
    <tr><td>Model</td><td></td></tr>
    <tr><td>Engine Make</td><td></td></tr>
    <tr><td>Number of Seats</td><td></td></tr>
  </tbody>
</table>


html css html-table
person George    schedule 24.09.2013    source แหล่งที่มา
comment
เพิ่ม display:block และเส้นขอบจะปรากฏขึ้น   -  person Barbara Laird    schedule 24.09.2013
comment
@Keith tbody เป็นองค์ประกอบคอนเทนเนอร์สำหรับส่วนเนื้อหาขององค์ประกอบตาราง stackoverflow.com/questions/923655/   -  person Patrick Evans    schedule 24.09.2013
comment
ขอบคุณบาร์บาร่า display:block ทำให้เส้นขอบปรากฏขึ้นแม้ว่าจะไม่มีการเว้นวรรคก็ตาม มีวิธีใดบ้างที่จะทำให้การเว้นวรรคชายแดนทำงานที่นี่?   -  person George    schedule 24.09.2013
comment
การเปลี่ยนแปลงประเภทการแสดงผลของ tbody ทำให้องค์ประกอบตารางที่ไม่ระบุตัวตนถูกแทรก ภายใน tbody คุณไม่สามารถจัดรูปแบบองค์ประกอบ HTML ที่ไม่ระบุชื่อได้   -  person cimmanon    schedule 24.09.2013

คำตอบ (3)


arrow_upward
63
arrow_downward

เพิ่ม:

table {border-collapse: collapse;}

โกหก

person Riskbreaker    schedule 24.09.2013

arrow_upward
7
arrow_downward

เพิ่ม display:block ให้กับสไตล์ tbody ของคุณ ลองสิ่งนี้

tbody{
    display:block;
    border: 2px solid black;
    border-collapse: separate;
    border-spacing: 4px; 
}

คุณสามารถทดสอบได้ใน ซอ นี้

person Brian Kinyua    schedule 24.09.2013
comment
ขอบคุณไบรอัน นั่นเป็นเคล็ดลับ และระยะขอบด้านล่าง: 10px ในซอของคุณทำให้เส้นขอบแยกจากกัน - person George; 24.09.2013
comment
โปรดทราบว่าการแก้ไขประเภทการแสดงผลของ tbody ทำให้คอลัมน์ไม่เรียงกันอีกต่อไป: jsfiddle.net/bPL86/1< /ก> - person cimmanon; 25.09.2013
comment
ฉันเห็นแล้ว ซิมมานอน ราวกับว่าแต่ละ tbody กลายเป็นโต๊ะของตัวเอง เลวมาก. ฉันเดาว่าสิ่งที่ดีที่สุดที่ฉันสามารถทำได้คือทำให้คอลัมน์แรกมีความกว้างคงที่ - person George; 25.09.2013
comment
...ฉันยังคงคิดว่า table เป็นวิธีแก้ปัญหาที่ไม่จำเป็นต้อง display:block แต่เป็นอะไรก็ได้ที่ให้บริการเรือของคุณ - person Riskbreaker; 25.09.2013
comment
@ user1981459 อัตรากำไรนั้นมีวัตถุประสงค์เพื่อความสวยงาม :) และยินดีต้อนรับ - person Brian Kinyua; 25.09.2013

arrow_upward
4
arrow_downward

ใช้ box-shadow แทน border มันใช้งานได้ไม่ว่าจะใช้ค่า border-collapse ใดก็ตาม นอกจากนี้คุณยังสามารถใช้ border-radius กับมันได้อีกด้วย

tbody {
  box-shadow: 0 0 0 1px black;
  border-radius: 5px;
}
<table>
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
    </tr>
  </tbody>
</table>

person Stickers    schedule 16.02.2018