Usuwanie niechcianych granic komórek tabeli za pomocą CSS

Mam osobliwy i frustrujący problem. Aby uzyskać prosty znacznik:

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

Stosuję różne wartości koloru tła do nieparzystych elementów thead , tr i tr . Problem polega na tym, że w większości przeglądarek każda komórka ma niepożądane obramowanie, które nie jest kolorem żadnego z wierszy tabeli. Tylko w przeglądarce Firefox 3.5 tabela nie ma obramowań w żadnej komórce.

Chciałbym tylko wiedzieć, jak usunąć te obramowania w innych głównych przeglądarkach, aby jedyną rzeczą, którą widzisz w tabeli, były naprzemienne kolory wierszy.

Musisz dodać to do swojego CSS:

table { border-collapse:collapse }

dodaj trochę css:

td, th {
   border:none;
}

Zmodyfikuj swój kod HTML w ten sposób:

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

(Dodałem border="0" cellpadding="0" cellspacing="0" )

W CSS możesz wykonać następujące czynności:

table {
    border-collapse: collapse;
}

aby usunąć obramowanie, po prostu użyj css w ten sposób:

td {
 border-style : hidden!important;
}

Ustaw cellspacingatrybut tabeli na 0.

Możesz także użyć stylu CSS border-spacing: 0, ale tylko wtedy, gdy nie potrzebujesz obsługi starszych wersji IE.

Możesz także dodać

table td { border:0; }

powyższe jest równoważne ustawieniu cellpadding = "0"

usuwa wypełnienie automatycznie dodawane do komórek przez przeglądarki, które mogą zależeć od typu dokumentu i / lub dowolnego kodu CSS używanego do resetowania domyślnych stylów przeglądarki

Po wypróbowaniu powyższych sugestii jedyną rzeczą, która zadziałała, była zmiana atrybutu obramowania na „0” w kolejnych sekcjach pliku style.css motywu podrzędnego (wykonaj operację „Znajdź”, aby zlokalizować każdy z nich - poniżej przedstawiono tylko fragmenty):

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

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

Wygląda więc później tak:

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

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

Spróbuj przypisać styl border: 0px; border-collapse: collapse;elementowi tabeli.

czasami nawet po wyczyszczeniu borders.

Powodem jest to, że masz obrazy w środku td, nadawanie obrazów display:blockrozwiązuje problem.