¿Cómo puedo aplicar un borde solo dentro de una tabla?

195

Estoy tratando de descubrir cómo agregar bordes solo dentro de la tabla. Cuando lo hago:

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

El borde está alrededor de toda la tabla y también entre las celdas de la tabla. Lo que quiero lograr es tener un borde solo dentro de la tabla alrededor de las celdas de la tabla (sin borde exterior alrededor de la tabla).

Aquí está el marcado que estoy usando para las tablas (aunque creo que eso no es 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>

Y aquí hay algunos estilos básicos que aplico a la mayoría de mis tablas:

table {
    border-collapse: collapse;
    border-spacing: 0;
}
html css html-table border Richard Knop
fuente
Solo veo bordes solo alrededor de las celdas. Como cada una de las celdas tiene un borde, parece que la tabla tiene un borde. Quizás no entiendo la pregunta?
Chetan S
3
También se llama fronteras internas .
Caracol mecánico el

Respuestas:

203

Si está haciendo lo que creo que está tratando de hacer, necesitará algo un poco más como esto:

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

El problema es que está configurando un 'borde completo' alrededor de todas las celdas, lo que hace que parezca que tiene un borde alrededor de toda la tabla.

Salud.

EDITAR: se puede encontrar un poco más de información sobre esas pseudo-clases en quirksmode y, como era de esperar, usted es prácticamente SOL en términos de soporte de IE.

theIV
fuente
Con tablas simples como esta, hay una solución mucho más corta que evita usar pseudo-clases usando el siguiente combinador de hermanos. Mira mi respuesta.
dalgard
1
@theIV, con esta respuesta hace más de 5 años, ¿hay alguna forma 'nueva' / 'más eficiente' que esta?
jbutler483
No funciona si alguna vez usas filas en la primera columna de una tabla.
Jack
191

esto funciona para mi:

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

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

ver ejemplo ...

probado en FF 3.6 y Chromium 5.0, IE carece de soporte; de W3C :

Las fronteras con el 'estilo de borde' de 'oculto' tienen prioridad sobre todas las demás fronteras en conflicto. Cualquier borde con este valor suprime todos los bordes en esta ubicación.

anthonyrisinger
fuente
1
Mientras no necesite un borde de mesa, esta es definitivamente la solución más elegante.
cjroth
42

Ejemplo de una manera muy simple para que usted logre el efecto deseado:

<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
fuente
13
"MAGIC" EXPLICADO: frame y rulesson atributos VIEJOS (no HTML5) table (en su lugar, debe usar CSS). framedice qué partes de los bordes exteriores de la mesa deben estar visibles - voidsignifica ocultar todos los bordes exteriores ... rulesdice qué partes de los bordes interiores de la mesa deben estar visibles - allsignifica todos ... obviamente ... Por favor, no use esto, a menos que son fanáticos de HTML3 ... :)
jave.web
1
Agregando algo como borde: 1px negro sólido asegurará que el límite exterior de la tabla tenga un borde.
Aaron Liu
1
Funcionó de maravilla en 2020 para agregar rápidamente algo de legibilidad a una tabla ridículamente espaciada en un sitio web que estaba leyendo. En realidad, esto fue suficiente para las fronteras internas: reglas = "todos"
Edoardo Facchinelli
11

Debido a la compatibilidad de mantenimiento con ie7, ie8, sugiero usar el primer hijo y no el último hijo para hacer esto:

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

Puede obtener información sobre las pseudo-clases CSS 2.1 en: http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx

Crisboot
fuente
Esta es una gran solución. Pero tenga cuidado, si tiene otra tabla en una de las celdas de su tabla y desea ver los bordes internos, necesita otro conjunto de líneas CSS para su tabla "interna"
Michael Biermann
10

Para el marcado de tabla ordinario, aquí hay una solución corta que funciona en todos los dispositivos / navegadores en BrowserStack, excepto IE 7 y siguientes:

table { border-collapse: collapse; }

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

Para el soporte de IE 7, agregue esto:

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

Puede ver un caso de prueba aquí: http://codepen.io/dalgard/pen/wmcdE

dalgard
fuente
Genial, ya que esto también le permite a uno establecer un borde diferente para la mesa, mejor que simplemente no mostrarlo.
jsbueno
5

Esto debería funcionar:

table {
 border:0;
}

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

editar:

Acabo de probarlo, no hay borde de la mesa. pero si configuro un borde de tabla, se elimina por el colapso del borde.

Este es el archivo de prueba:

<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
fuente
No, eso no funcionó. Lo he intentado. Editaré mi primera publicación.
Richard Knop
0

Agregue el borde a cada celda con esto:

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

Elimine el borde superior de todas las celdas en la primera fila:

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

Elimine el borde izquierdo de las celdas en la primera columna:

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

Elimine el borde derecho de las celdas en la última columna:

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

Elimine el borde inferior de las celdas en la última fila:

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

http://jsfiddle.net/hzru0ytx/

Brian
fuente
0

Funciona para cualquier combinación de tbody / thead / tfoot y 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>
Expandir fragmento

usuario1119279
fuente