2012-03-30 12 views
18

Tengo una tabla, primera fila es como¿Cómo suprimir espaciado de bordes en la tabla

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

pongo un fondo negro a la "th". Ahora las celdas 1 y 2 tienen algún tipo de frontera entre el/los separa ... Yo tenía un aspecto en el código fuente y creo que he encontrado algo:

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

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

¿Alguien puede ayudarme y guiarme por dónde está el límite?

Respuesta

32

Su mesa será como a continuación de forma predeterminada y fija las reglas CSS en las mesas de identidad o Clase

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

css:

border-collapse: collapse; 
+0

gracias, fue el "cellspacing =" 1 "en las propiedades de la tabla, así que lo cambié a" 0 ", mi mal) gracias por la ayuda –

+0

Tuve que usar [' normalize.css'] (http: // necolas. github.io/normalize.css/) al final para detener Chrome agregando el '' 2px'' margin' alrededor de mis elementos 'input' – Lankymart

+0

¿y si aún quieres los bordes? ¿pero no hay relleno entre ellos? – SuperUberDuper

8

establecer una regla CSS en su mesa:

table { 
    border-collapse: collapse; 
} 

se puede visitar este jsFiddle example y cambiar la propiedad border-collapse del colapso de separar para ver cómo cambia el diseño de la mesa. El border-collapse property solo puede colapsarse, separarse o heredarse.

+0

gracias, que era el "cellspacing =" 1" en las propiedades de tabla, así que lo cambié a "0", mis malos) Gracias por ayudar –

5

border-collapse: none no es válido. Pruebe border-collapse: collapse.

+0

gracias, es fue el "cellspacing =" 1 "en las propiedades de la tabla, así que lo cambié a" 0 ", mi mal) gracias por la ayuda –

+1

yw. Lo mejor es mantener el estilo y el espacio en tus archivos CSS. el espaciamiento de las células y el colapso de los bordes tienen el mismo resultado. Deje el formato del contenido a CSS. – cp3

1

puede utilizar colapso frontera. La propiedad de colapso de borde establece si los bordes de la tabla están contraídos en un solo borde o separados como en HTML estándar.

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

En el CSS2 colapsado modelo de frontera, se ha previsto que la resolución de los casos donde las fronteras especifican para las células adyacentes difieren y están en conflicto:

  1. Si cualquier frontera compartida tiene un componente donde el 'borde' se establece en "hidden" para CUALQUIERA de los miembros compartidos, el borde común debe establecerse incondicionalmente en "hidden".

  2. Si cualquier borde compartido tiene un componente donde 'border' está establecido en "ninguno", puede ser anulado por cualquier otro miembro que comparta los bordes con un valor de propiedad de 'borde' renderizable.

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

  4. Si una frontera común tiene un 'border-width' contención, (sin componente que tiene un valor de 'frontera' de "hidden", por supuesto, la mayor border-width deben ser prestados.

  5. Si una frontera común tiene una aseveración de border-style ', la prioridad sugerido debe ser utilizado (disminución de izquierda a derecha): "double", "solid", "dashed", "dotted", "ridge "," outset "," groove "," inset ".

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

    table 
        { 
        border-collapse:collapse; 
        } 
    

Nota

  1. En el "colapsado frontera" renderizado modelo, el valor 'border-style' de "inserción" se comporta como "ranura", y se comporta "inicio" como "cresta".
  2. CSS2 especificó que el valor inicial para esta propiedad fue "colapsar". Debido a que Mozilla y Opera se comportan de tal manera que el valor inicial es "separado", CSS2.1 ahora hace "separar" el valor inicial oficial.
0

¡Probar

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