การลบเส้นขอบเซลล์ตารางที่ไม่ต้องการด้วย CSS

ฉันมีปัญหาที่แปลกประหลาดและน่าหงุดหงิด สำหรับมาร์กอัปอย่างง่าย:

<table>
    <thead>
        <tr><th>1</th><th>2</th><th>3</th></tr>
     </thead>
    <tbody>
        <tr><td>a</td><td>b></td><td>c</td></tr>
        <tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
    </tbody>
</table>

ฉันใช้ค่าสีพื้นหลังที่แตกต่างกันกับองค์ประกอบthead , trและtrคี่ ปัญหาคือในเบราว์เซอร์ส่วนใหญ่ทุกเซลล์จะมีเส้นขอบที่ไม่ต้องการซึ่งไม่ใช่สีของแถวตาราง เฉพาะใน Firefox 3.5 เท่านั้นที่ตารางจะไม่มีเส้นขอบในเซลล์ใด ๆ

ฉันต้องการทราบวิธีลบเส้นขอบเหล่านี้ในเบราว์เซอร์หลักอื่น ๆ เพื่อให้สิ่งเดียวที่คุณเห็นในตารางคือสีของแถวที่สลับกัน

คุณต้องเพิ่มสิ่งนี้ใน CSS ของคุณ:

table { border-collapse:collapse }

เพิ่ม css:

td, th {
   border:none;
}

แก้ไข HTML ของคุณดังนี้:

<table border="0" cellpadding="0" cellspacing="0">
    <thead>
        <tr><td>1</td><td>2</td><td>3</td></tr>
     </thead>
    <tbody>
        <tr><td>a</td><td>b></td><td>c</td></tr>
        <tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
    </tbody>
</table>

(ฉันเพิ่มborder="0" cellpadding="0" cellspacing="0")

ใน CSS คุณสามารถทำสิ่งต่อไปนี้:

table {
    border-collapse: collapse;
}

ในการลบเส้นขอบให้ใช้ css ดังนี้:

td {
 border-style : hidden!important;
}

ตั้งค่าแอตทริบิวต์ของตารางcellspacing0

คุณยังสามารถใช้สไตล์ CSS border-spacing: 0ได้ แต่ถ้าคุณไม่จำเป็นต้องรองรับ IE เวอร์ชันเก่า

คุณอาจต้องการเพิ่ม

table td { border:0; }

ข้างต้นเทียบเท่ากับการตั้งค่า cellpadding = "0"

มันจะกำจัดช่องว่างที่เพิ่มลงในเซลล์โดยอัตโนมัติโดยเบราว์เซอร์ซึ่งอาจขึ้นอยู่กับประเภทหลักและ / หรือ CSS ใด ๆ ที่ใช้เพื่อรีเซ็ตรูปแบบเบราว์เซอร์เริ่มต้น

หลังจากลองทำตามคำแนะนำข้างต้นสิ่งเดียวที่ได้ผลสำหรับฉันคือการเปลี่ยนแอตทริบิวต์ border เป็น "0" ในส่วนต่อไปนี้ของ style.css ของธีมลูก (ดำเนินการ "ค้นหา" เพื่อค้นหาแต่ละรายการต่อไปนี้เป็นเพียง ตัวอย่าง):

.comment-content table {
    border-bottom: 1px solid #ddd;

.comment-content td {
    border-top: 1px solid #ddd;
    padding: 6px 10px 6px 0;
}

หลังจากนั้นจะมีลักษณะดังนี้:

.comment-content table {
    border-bottom: 0;

.comment-content td {
    border-top: 0;
    padding: 6px 10px 6px 0;
}

ลองกำหนดรูปแบบborder: 0px; border-collapse: collapse;ให้กับองค์ประกอบตาราง

บางครั้งแม้หลังจากล้างborders

เหตุผลก็คือคุณมีภาพอยู่ภายในtdทำให้ภาพdisplay:blockสามารถแก้ได้