Rimozione dei bordi delle celle della tabella indesiderati con CSS

89

Ho un problema peculiare e frustrante. Per il markup semplice:

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

Applico diversi valori di colore di sfondo agli elementi thead , tr e tr odd. Il problema è che nella maggior parte dei browser, ogni cella ha un bordo indesiderato che non è del colore di nessuna delle righe della tabella. Solo in Firefox 3.5 la tabella non ha bordi in nessuna cella.

Vorrei solo sapere come rimuovere questi bordi negli altri principali browser in modo che l'unica cosa che vedi nella tabella siano i colori delle righe alternate.

html css html-table

— Bob
fonte

2

Grazie a tutti coloro che hanno suggerito di aggiungere border-collapse: collapse al CSS. Quello ha fatto.

— Bob,

211

Devi aggiungerlo al tuo CSS:

table { border-collapse:collapse }

— Doug Neiner
fonte

13

Notare che questo deve essere applicato alla tabella , non al td . Ho appena commesso questo errore e ho passato più di mezz'ora a cercare di capire perché non funzionava.

— javawizard

16

aggiungi un po 'di css:

td, th {
   border:none;
}

— Dave Markle
fonte

1

non funziona per me su chrome 60.0.3112.113 quando applicato al tavolo

— Abdullah Gheith

15

Modifica il tuo HTML in questo modo:

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

(Ho aggiunto border="0" cellpadding="0" cellspacing="0")

In CSS, puoi fare quanto segue:

table {
    border-collapse: collapse;
}

— Gabriel McAdams
fonte

12

per rimuovere il bordo, basta usare CSS in questo modo:

td {
 border-style : hidden!important;
}

— Amine_Dev
fonte

8

Imposta l' cellspacingattributo della tabella su 0.

Puoi anche usare lo stile CSS border-spacing: 0, ma solo se non hai bisogno di supportare versioni precedenti di IE.

— SLaks
fonte

1

Potresti anche voler aggiungere

table td { border:0; }

quanto sopra equivale a impostare cellpadding = "0"

elimina il riempimento automatico aggiunto alle celle dai browser che possono dipendere da doctype e / o da qualsiasi CSS utilizzato per ripristinare gli stili di browser predefiniti

— falc0n
fonte

1

Il cellpadding è lo spazio tra il contenuto della tabella e i suoi confini td{padding:X}. Lo spazio tra le celle è lo spazio tra le borse di ciascuna cella ("margine" tra i bordi delle celle). Puoi impostare border-collapseper imitare ciò che fa l' cellspacingattributo sul tag della tabella, ma non è infallibile.

— MetalFrog

1

Dopo aver provato i suggerimenti precedenti, l'unica cosa che ha funzionato per me è stata la modifica dell'attributo border su "0" nelle seguenti sezioni di style.css di un child theme (eseguire un'operazione "Trova" per individuarli - i seguenti sono solo snippet):

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

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

Così in seguito in questo modo:

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

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

— Jessica Escobar
fonte

0

Prova ad assegnare lo stile di border: 0px; border-collapse: collapse;all'elemento table.

— Josh Anderson
fonte

3

@ Josh non è vero border: none?

— Doug Neiner,

@DougNeiner Vecchio post, ma nessuno e 0 sono entrambi ugualmente validi. Mi piace 0 perché devo digitare meno :)

— Scott Simontis

-1

a volte anche dopo la cancellazione border s.

il motivo è che hai immagini all'interno del td, dare le immagini lo display:blockrisolve.

— bresleveloper
fonte