imagenes - tablas en html ejemplos
CSS-Borde solo dentro de la tabla (8)
Agregue el borde a cada celda con esto:
table > tbody > tr > td { border: 1px solid rgba(255, 255, 255, 0.1); }
Retire el borde superior de todas las celdas en la primera fila:
table > tbody > tr:first-child > td { border-top: 0; }
Retire el borde izquierdo de las celdas en la primera columna:
table > tbody > tr > td:first-child { border-left: 0; }
Retire el borde derecho de las celdas en la última columna:
table > tbody > tr > td:last-child { border-right: 0; }
Retire el borde inferior de las celdas en la última fila:
table > tbody > tr:last-child > td { border-bottom: 0; }
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 mesa alrededor de las celdas de la tabla (sin borde externo alrededor de la mesa).
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;
}
Debido a la compatibilidad de mantenimiento con ie7, ie8, sugiero usar first-child y no last-child 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 aprender sobre las pseudo-clases de CSS 2.1 en: http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx
Ejemplo de una forma muy simple de lograr 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>
Esto debería funcionar:
table {
border:0;
}
table td, table th {
border: 1px solid black;
border-collapse: collapse;
}
editar:
Lo intenté, sin borde de mesa. pero si configuro un borde de tabla, se elimina por el colapso de 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>
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; }
Se puede ver un caso de prueba aquí: http://codepen.io/dalgard/pen/wmcdE
Si estás haciendo lo que creo que estás tratando de hacer, necesitarás algo un poco más como este:
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;
}
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.
Aclamaciones.
EDITAR: Puede encontrar un poco más de información sobre esas pseudo-clases en el modo quirksmode , y, como es de esperar, usted es prácticamente SOL en términos de soporte de IE.
eso lo hará todo sin css <TABLE BORDER=1 RULES=ALL FRAME=VOID>
código de: HTML CODE TUTORIAL
esto funciona para mí:
table {
border-collapse: collapse;
border-style: hidden;
}
table td, table th {
border: 1px solid black;
}
probado en FF 3.6 y Chromium 5.0, IE carece de soporte; del W3C :
Los bordes con el ''estilo de borde'' de ''oculto'' tienen prioridad sobre el resto de las fronteras conflictivas. Cualquier borde con este valor suprime todas las fronteras en esta ubicación.