จะเพิ่มเส้นขอบที่ด้านล่างของแต่ละตารางที่มีการแบ่งหน้าด้วย CSS ได้อย่างไร

ฉันมีรายการข้อมูลจำนวนมากภายในตาราง HTML ที่ป้อนจากฐานข้อมูล จากนั้นจะพิมพ์ออกมาเป็น PDF ตารางเป็นเพียงตารางธรรมดา มีสองคอลัมน์ แต่สไตล์ที่ผมใช้มีเส้นขอบซ้ายและขวาเพื่อแสดงเส้นแนวตั้งในแต่ละตารางในทุกหน้า แต่ไม่ใช่แนวนอน ฉันใช้ CSS เพื่อวาดเส้นขอบ บางอย่างเช่นนี้

td {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}

ปัญหาที่ฉันได้รับคือเมื่อแบ่งหน้า (พิมพ์เป็น PDF) ในแต่ละหน้าที่ด้านล่างสุดของตาราง มันไม่ได้ปิดดังนั้นจึงดูเปิดอยู่ ฉันต้องการปิดเส้นขอบที่ด้านล่างของตารางของแต่ละหน้า

ฉันจัดการวาดเส้นขอบของแถวสุดท้ายโดยใช้ tfoot ซึ่งใช้งานได้ดีจนกระทั่งฉันไปถึงหน้าสุดท้าย ดูเหมือนว่ามันจะวาดไปตรงนั้นด้วย ไม่อยากให้ลากตอนจบเพราะผมสรุปไว้แล้วมีเส้นตรงนั้นไม่ดีเลย

<thead>...some header...</thead>
<tfoot>
  <tr><td class=myborder>&nbsp;</td></tr>
</tfoot>
<tbody>...list of data (100 rows of tr)...</tbody>

CSS ฉันใช้สีแดงเพื่อไฮไลต์บนโต๊ะของฉัน:

.myborder {
  border-top: 1px solid red;
}

คำถามของฉันคือมี CSS ใดบ้างที่สามารถลากเส้นธรรมดาที่แต่ละหน้าสิ้นสุดแต่ไม่สามารถลากเส้นที่หน้าสุดท้ายได้?

หากใช้ tfoot ฉันได้ลองหาวิธีแก้ปัญหาแล้ว มันค่อนข้างเหมือนกับโพสต์ด้านล่าง แต่แตกต่างออกไปเล็กน้อย ฉันไม่ต้องการให้ tfoot แสดงในหน้าสุดท้าย แต่หน้าอื่น ๆ ก็ใช้ได้

วิธีทำให้ TFOOT แสดง ที่ท้ายตารางเท่านั้น

ขอบคุณล่วงหน้า.

ป.ล. ขอบคุณ Ben สำหรับการแก้ไขรูปแบบ นี่เป็นโพสต์แรกของฉัน :)


person cuppacoffee    schedule 04.04.2016    source แหล่งที่มา
comment
ไม่มีปัญหา การแทนที่ <foot> ด้วย <tfoot> ช่วยได้ไหม   -  person Ben Fransen    schedule 04.04.2016


คำตอบ (2)


ฉันได้อัปเดตคำถามของคุณแล้ว และในขณะที่จัดรูปแบบ ฉันสังเกตเห็นว่าอย่างน้อยมี <td> วางผิดที่ใน <tfoot> ของคุณ นอกจากนี้ คุณกำลังเปิดด้วย <foot> ซึ่งควรเป็น <tfoot>

person Ben Fransen    schedule 04.04.2016

คุณอาจใช้สิ่งนี้ทากับทุกเท้ายกเว้นลูกสุดท้าย

tfoot:not(:last-child):after {
    border-bottom: 1px solid red;
}

คำตอบแรก ถ้าผิดพลาดประการใดก็ขออภัยด้วย

person Wee Hui Pherng    schedule 04.04.2016
comment
ขอบคุณ Wee Hui Pheng สำหรับคำตอบ แต่น่าเสียดายที่มันไม่ได้ผลสำหรับฉัน ฉันใช้ MPDF เพื่อสร้าง PDF และพบว่าสิ่งพิเศษเช่นนั้นใช้ไม่ได้กับ CSS ทั้งหมด ฉันลองใช้ nth-child(odd) ด้วยเช่นกัน ดังนั้นสีพื้นหลังสำหรับแถวคี่ทั้งหมดที่แตกต่างจากแถวคู่ก็ไม่ทำงานเช่นกัน ฉันเดาว่า MPDF ยังไม่ถึงขนาดนั้น (ยัง) - person cuppacoffee; 06.04.2016
comment
เวอร์ชัน MPDF ที่ฉันใช้คือ 5.7.4 - person cuppacoffee; 06.04.2016