CSS ile istenmeyen tablo hücresi kenarlıklarını kaldırma

Tuhaf ve sinir bozucu bir sorunum var. Basit biçimlendirme için:

<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 ve tr garip öğelerine farklı arka plan rengi değerleri uygularım . Sorun, çoğu tarayıcıda her hücrede, tablo satırlarının hiçbirinin rengi olmayan istenmeyen bir kenarlığa sahip olmasıdır. Yalnızca Firefox 3.5'te, tablonun herhangi bir hücrede sınırı yoktur.

Tabloda gördüğünüz tek şeyin değişen satır renkleri olması için diğer büyük tarayıcılarda bu kenarlıkları nasıl kaldıracağımı bilmek istiyorum.

Bunu CSS'nize eklemeniz gerekiyor:

table { border-collapse:collapse }

biraz css ekleyin:

td, th {
   border:none;
}

HTML'nizi şu şekilde değiştirin:

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

(Ekledim border="0" cellpadding="0" cellspacing="0")

CSS'de şunları yapabilirsiniz:

table {
    border-collapse: collapse;
}

kenarlığı kaldırmak için css'i şu şekilde kullanın:

td {
 border-style : hidden!important;
}

cellspacingTablonun özniteliğini olarak ayarlayın 0.

CSS stilini de kullanabilirsiniz border-spacing: 0, ancak yalnızca IE'nin eski sürümlerini desteklemeniz gerekmiyorsa.

Ayrıca eklemek isteyebilirsiniz

table td { border:0; }

yukarıdaki hücre dolgusu = "0" ayarına eşdeğerdir

tarayıcılar tarafından hücrelere otomatik olarak eklenen ve belge türüne ve / veya varsayılan tarayıcı stillerini sıfırlamak için kullanılan herhangi bir CSS'ye bağlı olabilecek dolgudan kurtulur

Yukarıdaki önerileri denedikten sonra, benim için işe yarayan tek şey, bir alt temanın style.css'nin sonraki bölümlerinde border niteliğini "0" olarak değiştirmekti (her birini bulmak için bir "Bul" işlemi yapın - aşağıdakiler yalnızca parçacıklar):

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

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

Böylece daha sonra şöyle görünür:

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

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

Stilini border: 0px; border-collapse: collapse;tablo öğesine atamayı deneyin .

bazen temizledikten sonra bile border.

Bunun nedeni, içinde görüntülerin olması, görüntülerin tdverilmesi display:blocksorunu çözüyor.