css - que - Cómo eliminar el espacio entre bordes en la tabla

tablas en html ejemplos

Question

Tengo una mesa, la primera fila es como

<tr>
<th>1</th>
<th>2</th>
</tr>

Pongo un fondo negro a "th". Ahora las celdas 1 y 2 tienen algún tipo de borde entre / separándolos ... Eché un vistazo al código fuente y creo que encontré algo:

border-collapse: separate;
border-spacing: 2px;

Este código CSS aparece en el código fuente como "user agent stylesheettable" y no pude habilitarlo / deshabilitarlo para probar si este es el problema, pero probé y agregué el mismo código pero con los parámetros "ninguno" y "0" pero no sirvió de nada ...

¿Alguien puede ayudarme y guiarme desde donde está la frontera por favor?

Answer 1

Establece una regla CSS en tu mesa:

table {
    border-collapse: collapse;
}

Puede visitar este ejemplo de jsFiddle y cambiar la propiedad border-collapse de colapso para separar para ver cómo cambia el diseño de la tabla. La propiedad border-collapse solo se puede contraer, separar o heredar.

Answer 2

Prueba esto

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

Answer 3

Puedes usar el colapso del borde. La propiedad border-collapse establece si los bordes de la tabla se contraen en un solo borde o se separan como en HTML estándar.

De http://www.blooberry.com/indexdot/css/properties/table/bcollapse.htm :

En el modelo de borde colapsado de CSS2, se prevé la resolución de casos en los que los bordes especificados para celdas adyacentes difieren y están en conflicto:

1. Si algún borde compartido tiene un componente donde el ''borde'' está configurado como " hidden " para CUALQUIERA de los miembros compartidos, el borde común debe establecerse incondicionalmente como " hidden ".

2. Si algún borde compartido tiene un componente en el que el '' border '' se establece en "ninguno", cualquier otro miembro que comparte el borde puede anularlo y llevar un valor de propiedad de "borde".

3. Si TODOS los miembros que comparten bordes especifican un valor de "ninguno" para un componente de borde, solo entonces el borde se establecerá en " none ".

4. Si un borde compartido tiene una contención de '' border-width '' (por supuesto, si ningún componente tiene un valor de "borde" de " hidden ", debe representarse el mayor ancho de borde.

5. Si un borde compartido tiene una contención de ''estilo de borde'', se debe usar la prioridad sugerida (disminuyendo de izquierda a derecha): " double ", " solid ", " dashed ", " dotted ", " ridge ", " outset " , " groove ", " inset ".

6. Si un borde compartido tiene una contención de ''color de borde'', se debe usar la prioridad sugerida (disminuyendo de izquierda a derecha): Celda de tabla, fila de tabla, grupo de filas, columna, grupo de columnas, tabla.

   table
     {
      border-collapse:collapse;
     }

Nota

1. En el modelo de renderizado "borde plegado", el valor de "estilo de borde" de "inserción" se comporta como "groove", y "outset" se comporta como "cresta".
2. CSS2 especificó que el valor inicial de esta propiedad era "contraer". Debido a que Mozilla y Opera se comportan de tal manera que el valor inicial es "separado", CSS2.1 ahora hace que "separado" sea el valor inicial oficial.

Answer 4

Su tabla debe ser como la siguiente por defecto y establecer las reglas de css en las tablas ID o Clase

<table border="0" cellspacing="0" cellpadding="0">
 <tr>
  <th>1</th>
  <th>2</th>
</tr>
</table>

css:

border-collapse: collapse;

Answer 5

border-collapse: none es inválido. Intenta border-collapse: collapse .