Usuwanie niechcianych obramowań komórek tabeli za pomocą CSS

Question

Mam specyficzny i frustrujący problem. Dla prostego oznakowania:

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

I stosuje różne wartości background-color do THEAD, tr i tr nieparzystych elementów. Problem polega na tym, że w większości przeglądarek każda komórka ma niepożądaną obramowanie, które nie jest kolorem żadnego z wierszy tabeli. Tylko w Firefoksie 3.5 tabela nie ma granic w żadnej komórce.

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

Answer 1

Trzeba dodać to do Twojego CSS :

table { border-collapse:collapse } 

Answer 2

zmodyfikować kod HTML tak:

<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żna wykonać następujące czynności:

table { 
    border-collapse: collapse; 
} 

Answer 3

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

Answer 4

Ustaw atrybut cellspacing tabeli na .

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

Answer 5

dodać trochę CSS:

td, th { 
    border:none; 
} 

Answer 6

Można również dodać

table td { border:0; } 

wyżej jest równoważna = "0"

pozbywa padding automatycznego ustawiania cellpadding dodane 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

Answer 7

Po wypróbowaniu powyższych sugestii, jedyną rzeczą, która zadziałała, była zmiana atrybutu border na "0" w kolejnych sekcjach stylu child.css (wykonaj operację "Znajdź", aby zlokalizować każdą z nich - są to: tylko fragmenty):

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

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

Zatem patrząc jak to potem:

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

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

Answer 8

<td style=" border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;"> 

A jeśli chcesz, możesz do czegoś takiego

$style = ' style=" border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;"'; 

<td $style>bla bla</td><td $style>bla bla</td><td $style>bla bla</td><td $style>bla bla</td> 

Answer 9

czasami nawet po usunięciu s. border.

Powodem jest to, że masz obrazy wewnątrz td, dzięki czemu obrazy rozwiązują je przez display:block.

Answer 10

usunąć granicę, Juste użyciu css tak:

td { 
border-style : hidden!important; 
}