Come posso applicare un bordo solo all'interno di una tabella?

195

Sto cercando di capire come aggiungere il bordo solo all'interno della tabella. Quando io faccio:

table {
    border: 0;
}
table td, table th {
    border: 1px solid black;
}

Il bordo è attorno all'intera tabella e anche tra le celle della tabella. Quello che voglio ottenere è avere il bordo solo all'interno della tabella attorno alle celle della tabella (senza bordo esterno attorno alla tabella).

Ecco il markup che sto usando per le tabelle (anche se penso che non sia importante):

<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

E qui ci sono alcuni stili di base che applico alla maggior parte delle mie tabelle:

table {
    border-collapse: collapse;
    border-spacing: 0;
}

— Richard Knop
fonte

Vedo solo i bordi solo attorno alle celle. Poiché ciascuna delle celle ha un bordo, sembra che la tabella abbia un bordo. Forse non capisco la domanda?

— Chetan,

3

Chiamato anche bordi interni .

— Lumaca meccanica

203

Se stai facendo quello che credo tu stia cercando di fare, avrai bisogno di qualcosa di un po 'più simile a questo:

table {
  border-collapse: collapse;
}
table td, table th {
  border: 1px solid black;
}
table tr:first-child th {
  border-top: 0;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
  border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
  border-right: 0;
}

jsFiddle Demo

Il problema è che stai impostando un "bordo completo" attorno a tutte le celle, che lo fanno apparire come se avessi un bordo attorno all'intera tabella.

Saluti.

EDIT: Un po 'più di informazioni su quelle pseudo-classi possono essere trovate su quirksmode e, come prevedibile, sei praticamente SOL in termini di supporto IE.

— theIV
fonte

Con tabelle semplici come questa, esiste una soluzione molto più breve che evita l'uso di pseudo-classi utilizzando il prossimo combinatore di pari livello. Vedi la mia risposta

— Dalgard,

1

@theIV, con questa risposta 5+ anni fa, esiste un modo "nuovo" / "più efficiente"?

— jbutler483,

Non funziona se si utilizza mai rowpan sulla prima colonna di una tabella.

— Jack,

192

questo funziona per me:

table {
    border-collapse: collapse;
    border-style: hidden;
}

table td, table th {
    border: 1px solid black;
}

vedi esempio ...

testato in FF 3.6 e Chromium 5.0, IE manca di supporto; dal W3C :

I bordi con lo "stile del bordo" di "nascosto" hanno la precedenza su tutti gli altri bordi in conflitto. Qualsiasi bordo con questo valore elimina tutti i bordi in questa posizione.

— anthonyrisinger
fonte

1

Finché non hai bisogno di un bordo del tavolo, questa è sicuramente la soluzione più elegante.

— cjroth,

42

Esempio di un modo molto semplice per ottenere l'effetto desiderato:

<table border="1" frame="void" rules="all">
    <tr>
        <td>1111</td>
        <td>2222</td>
        <td>3333</td>
    </tr>
    <tr>
        <td>4444</td>
        <td>5555</td>
        <td>6666</td>
    </tr>
</table>

— Jony
fonte

13

"MAGIC" SPIEGATO: frame e rulessono attributi VECCHI (non HTML5) table (dovresti usare CSS invece). framedice quali parti dei bordi dei tavoli esterni dovrebbero essere visibili - voidsignifica nascondere tutti i bordi esterni ... rulesdice quali parti dei bordi dei tavoli interni dovrebbero essere visibili - allsignifica tutti ... ovviamente ... Per favore non usare questo, a meno che sono fanatici di HTML3 ... :)

— jave.web

1

Aggiungendo qualcosa come il bordo: 1px nero solido farà in modo che il bordo esterno della tabella ottenga un bordo.

— Aaron Liu,

1

Ha funzionato come un incantesimo nel 2020 per aggiungere rapidamente un po 'di leggibilità a un tavolo ridicolmente distanziato in un sito Web che stavo leggendo. In realtà, questo è bastato per i confini interni: rules = "all"

— Edoardo Facchinelli,

11

Per mantenere la compatibilità con ie7, ie8, suggerisco di usare first-child e non last-child per fare questo:

table tr td{border-top:1px solid #ffffff;border-left:1px solid #ffffff;}

table tr td:first-child{border-left:0;}

table tr:first-child td{border-top:0;}

Puoi conoscere le pseudo-classi CSS 2.1 su: http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx

— Crisboot
fonte

Questa è un'ottima soluzione Ma fai attenzione, se hai un'altra tabella in una delle celle della tua tabella e vuoi vedere i bordi interni hai bisogno di un altro set di linee CSS per la tua tabella "interna"

— Michael Biermann,

10

Per il normale markup delle tabelle, ecco una breve soluzione che funziona su tutti i dispositivi / browser su BrowserStack, tranne IE 7 e versioni precedenti:

table { border-collapse: collapse; }

td + td,
th + th { border-left: 1px solid; }
tr + tr { border-top: 1px solid; }

Per il supporto di IE 7, aggiungi questo:

tr + tr > td,
tr + tr > th { border-top: 1px solid; }

Un caso di test può essere visto qui: http://codepen.io/dalgard/pen/wmcdE

— dalgard
fonte

Fantastico - in quanto ciò consente anche di impostare un bordo diverso dal tavolo, più che semplicemente non visualizzarlo.

— jsbueno,

5

questo dovrebbe funzionare:

table {
 border:0;
}

table td, table th {
    border: 1px solid black;
    border-collapse: collapse;
}

modificare:

l'ho appena provato, nessun bordo del tavolo. ma se imposto un bordo della tabella, questo viene eliminato dal collasso del bordo.

questo è il testfile:

<html>
<head>
<style type="text/css">
table {
    border-collapse: collapse;
    border-spacing: 0;
}


table {
    border: 0;
}
table td, table th {
    border: 1px solid black;
}


</style>
</head>
<body>
<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

</body>
</html>

— Rufino
fonte

No che non ha funzionato, l'ho provato. Modificherò il mio primo post.

— Richard Knop,

3

che farà tutto senza CSS <TABLE BORDER=1 RULES=ALL FRAME=VOID>

codice da: HTML CODE TUTORIAL

— TwoFaceZ
fonte

0

Aggiungi il bordo a ogni cella con questo:

table > tbody > tr > td { border: 1px solid rgba(255, 255, 255, 0.1); }

Rimuovi il bordo superiore da tutte le celle della prima riga:

table > tbody > tr:first-child > td { border-top: 0; }

Rimuovi il bordo sinistro dalle celle nella prima colonna:

table > tbody > tr > td:first-child { border-left: 0; }

Rimuovi il bordo destro dalle celle nell'ultima colonna:

table > tbody > tr > td:last-child { border-right: 0; }

Rimuovi il bordo inferiore dalle celle nell'ultima riga:

table > tbody > tr:last-child > td { border-bottom: 0; }

http://jsfiddle.net/hzru0ytx/

— Brian
fonte

0

Funziona con qualsiasi combinazione di tbody / thead / tfoot e td / th

table.inner-border {
    border-collapse: collapse;
    border-spacing: 0;
}

table.inner-border > thead > tr > th,
table.inner-border > thead > tr > td,
table.inner-border > tbody > tr > th,
table.inner-border > tbody > tr > td,
table.inner-border > tfoot > tr > th,
table.inner-border > tfoot > tr > td {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}

table.inner-border > thead > tr > :last-child,
table.inner-border > tbody > tr > :last-child,
table.inner-border > tfoot > tr > :last-child {
    border-right: 0;
}

table.inner-border > :last-child > tr:last-child > td,
table.inner-border > :last-child > tr:last-child > th {
    border-bottom: 0;
}

<table class="inner-border">
    <thead>
    <tr>
        <th>head1,1</th>
        <td>head1,2</td>
        <td>head1,3</td>
    </tr>
    <tr>
        <td>head2,1</td>
        <td>head2,2</td>
        <th>head2,3</th>
    </tr>
    </thead>
    <tr>
        <td>1,1</td>
        <th>1,2</th>
        <td>1,3</td>
    </tr>
    <tr>
        <td>2,1</td>
        <td>2,2</td>
        <td>2,3</td>
    </tr>
    <tr>
        <td>3,1</td>
        <td>3,2</td>
        <td>3,3</td>
    </tr>
    <thead>
    <tr>
        <th>foot1,1</th>
        <td>foot1,2</td>
        <td>foot1,3</td>
    </tr>
    <tr>
        <td>foot2,1</td>
        <th>foot2,2</th>
        <th>foot2,3</th>
    </tr>
    </thead>
</table>

Espandi frammento

— user1119279
fonte