วิธีลบเส้นขอบออกจากตาราง HTML อย่างสมบูรณ์

เป้าหมายของฉันคือการสร้างหน้า HTML ที่คล้ายกับ "กรอบรูป" กล่าวอีกนัยหนึ่งฉันต้องการทำหน้าว่างที่ล้อมรอบด้วย 4 รูปภาพ

นี่คือรหัสของฉัน:

<table>
    <tr>
        <td class="bTop" colspan="3">
        </td>
    </tr>
    <tr>
        <td class="bLeft">
        </td>
        <td class="middle">
        </td>
        <td class="bRight">
        </td>
    </tr>
    <tr>
        <td class="bBottom" colspan="3">
        </td>
    </tr>                                                    
</table>

และคลาส CSS มีดังต่อไปนี้:

.bTop
{
    width: 960px;
    height: 111px;
    background-image: url('../Images/BackTop.jpg');
}
.bLeft
{
    width: 212px;
    height: 280px;
    background-image: url('../Images/BackLeft.jpg');    

}

.middle
{
    width: 536px;
    height: 280px;
}

.bRight
{
    width: 212px;
    height: 280px;
    background-image: url('../Images/BackRight.jpg');    
}

.bBottom
{        
    width: 960px;
    height: 111px;
    background-image: url('../Images/BackBottom.jpg');       
}

ปัญหาของฉันคือฉันได้รับเส้นสีขาวบาง ๆ ระหว่างเซลล์ของตารางฉันหมายความว่าเส้นขอบของรูปภาพไม่ต่อเนื่อง ฉันจะหลีกเลี่ยงช่องว่างสีขาวเหล่านี้ได้อย่างไร

<table cellspacing="0" cellpadding="0">

และใน CSS:

table {border: none;}

แก้ไข: ตามที่ iGEL ระบุไว้การแก้ปัญหานี้เลิกใช้แล้วอย่างเป็นทางการ (ยังใช้งานได้) ดังนั้นหากคุณเริ่มต้นจากศูนย์คุณควรใช้โซลูชันการยุบเส้นขอบของ jnpcl

จริงๆแล้วฉันไม่ชอบการเปลี่ยนแปลงนี้มากนัก (ไม่ได้ทำงานกับตารางที่มักจะ) มันทำให้งานบางอย่างซับซ้อนขึ้นเล็กน้อย เช่นเมื่อคุณต้องการรวมสองเส้นขอบที่แตกต่างกันในสถานที่เดียวกัน (มองเห็น) ในขณะที่หนึ่งเป็น TOP สำหรับหนึ่งแถวและที่สองเป็น BOTTOM สำหรับแถวอื่น พวกเขาจะยุบ (= จะแสดงเพียงหนึ่งรายการเท่านั้น) จากนั้นคุณต้องศึกษาว่าการคำนวณ "ลำดับความสำคัญ" ของเส้นขอบนั้นเป็นอย่างไรและลักษณะของเส้นขอบนั้น "แข็งแกร่งขึ้น" (เทียบกับแบบแข็งและแบบคู่เป็นต้น)

ฉันทำสิ่งนี้:

<table cellspacing="0" cellpadding="0">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>

----------

.first {border-bottom:1px solid #EEE;}
.second {border-top:1px solid #CCC;}

ทีนี้เมื่อการยุบเส้นขอบนี่ไม่ได้ผลเพราะมีการลบขอบหนึ่งครั้งเสมอ ฉันต้องทำมันด้วยวิธีอื่น (มีวิธีแก้ปัญหามากกว่า) ความเป็นไปได้อย่างหนึ่งคือการใช้ CSS3 พร้อมกล่องเงา:

<table class="tab">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>​​​

<style>
.tab {border-collapse:collapse;}
.tab .first {border-bottom:1px solid #EEE;}
.tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}​
</style>

คุณสามารถใช้บางอย่างเช่น "groove | ridge | inset | outset" สไตล์เส้นขอบด้วยเส้นขอบเดียว แต่สำหรับฉันมันไม่เหมาะเพราะฉันไม่สามารถควบคุมทั้งสองสีได้

อาจจะมีวิธีที่ง่ายและดีสำหรับการยุบเส้นขอบ แต่ฉันยังไม่เห็นมันและฉันก็ไม่ได้ใช้เวลากับมันมาก บางทีคนที่นี่จะสามารถแสดงให้ฉัน / เรา;)

table {
    border-collapse: collapse;
}

สำหรับฉันฉันต้องทำสิ่งนี้เพื่อลบเส้นขอบออกจากตารางและเซลล์ทั้งหมดอย่างสมบูรณ์ สิ่งนี้ไม่จำเป็นต้องแก้ไข HTML เลยซึ่งเป็นประโยชน์ในกรณีของฉัน

table, tr, td {
    border: none;
}

ในสภาพแวดล้อม bootstrap ไม่มีคำตอบยอดนิยมช่วย แต่ใช้ต่อไปนี้ลบเส้นขอบทั้งหมด:

.noBorder {
    border:none !important;
}

นำไปใช้เป็น:

<td class="noBorder">

ในสภาพแวดล้อม bootstrap นี่คือทางออกของฉัน:

    <table style="border-collapse: collapse; border: none;">
        <tr style="border: none;">
            <td style="border: none;">
            </td>
        </tr>
    </table>    

นี่คือสิ่งที่แก้ไขปัญหาสำหรับฉัน:

ในแท็ก HTML tr ของคุณเพิ่มสิ่งนี้:

style="border-collapse: collapse; border: none;"

ที่ลบเส้นขอบทั้งหมดที่แสดงบนแถวของตาราง