HTML tablosundan kenarlıkları tamamen kaldırma

Amacım, "fotoğraf çerçevesine" benzer bir HTML sayfası oluşturmak. Başka bir deyişle, 4 fotoğrafla çevrili boş bir sayfa yapmak istiyorum.

Bu benim kodum:

<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>

Ve CSS sınıfları şunlardır:

.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');       
}

Benim sorunum, tablonun hücreleri arasında ince beyaz çizgiler alıyorum, yani resimlerin kenarlığının sürekli olmadığı anlamına geliyor. Bu boşluklardan nasıl kaçınabilirim?

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

Ve css'de:

table {border: none;}

DÜZENLEME: iGEL'in belirttiği gibi, bu çözüm resmi olarak onaylanmamıştır (yine de işe yarıyor), bu nedenle sıfırdan başlıyorsanız, jnpcl'nin sınır çökmesi çözümüyle gitmelisiniz.

Aslında şu ana kadar bu değişiklikten hoşlanmıyorum (sık sık tablolarla çalışmayın). Bazı görevleri biraz daha karmaşık hale getirir. Örneğin, aynı yere (görsel olarak) iki farklı kenarlık eklemek istediğinizde, biri bir satır için TOP, diğeri diğer satır için BOTTOM olur. Çökecekler (= bunlardan sadece biri gösterilecek). Ardından, sınırın "önceliğinin" nasıl hesaplandığını ve hangi kenarlık stillerinin "daha güçlü" (çift - katı vb.) Olduğunu incelemeniz gerekir.

Bunu beğendim:

<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;}

Artık kenarlık daralmasıyla, her zaman bir kenarlık kaldırıldığı için bu çalışmaz. Bunu başka bir şekilde yapmalıyım (c'nin daha fazla çözümü var). Bir olasılık, kutu gölgeli CSS3 kullanmaktır:

<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>

Tek bir kenarlıkla "groove | ridge | inset | outset" kenarlık stili gibi bir şey de kullanabilirsiniz. Ama benim için bu uygun değil, çünkü her iki rengi de kontrol edemiyorum.

Belki de sınırları yıkmak için basit ve güzel bir çözüm var, ama henüz görmedim ve dürüstçe çok fazla zaman geçirmedim. Belki buradaki biri bana / bize gösterebilir;)

table {
    border-collapse: collapse;
}

Benim için sınırları tablodan ve tüm hücrelerden tamamen kaldırmak için böyle bir şey yapmam gerekiyordu. Bu, benim durumumda yardımcı olan HTML'nin hiç değiştirilmesini gerektirmez.

table, tr, td {
    border: none;
}

Bir önyükleme ortamında en iyi yanıtların hiçbiri yardımcı olmadı, ancak aşağıdakileri uygulamak tüm sınırları kaldırdı:

.noBorder {
    border:none !important;
}

Uygulama şekli:

<td class="noBorder">

Bir bootstrap ortamında benim çözümüm:

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

Sorunu benim için çözen şey buydu:

HTML tr etiketinize şunu ekleyin:

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

Böylece tablo satırında gösterilen tüm kenarlıklar kaldırıldı.