CSS: bordes entre columnas de la tabla solo

Question

¿Hay alguna forma, mediante CSS, de mostrar los bordes en una tabla solo entre columnas (no en los bordes exteriores)?

Answer 1

No sin los extraños selectores de CSS y marcas adicionales y cosas por el estilo.

Algo como esto podría hacer (usando selectores CSS):

table { 
    border:none; 
    border-collapse: collapse; 
} 

table td { 
    border-left: 1px solid #000; 
    border-right: 1px solid #000; 
} 

table td:first-child { 
    border-left: none; 
} 

table td:last-child { 
    border-right: none; 
} 

Editar

Para aclarar comentario golpe de @ Jeroen, todo lo que se necesitaría es:

table { border: none; border-collapse: collapse; } 
table td { border-left: 1px solid #000; } 
table td:first-child { border-left: none; } 

Answer 2

Puedo estar simplificando el problema, pero ¿funciona td {border-right: 1px solid red;} para la configuración de la tabla?

Answer 3

Los bordes en las tablas siempre son un poco escamosos. Una posibilidad sería agregar una declaración de borde-derecha a cada celda de la tabla, excepto las que están en la columna de la derecha. Si está utilizando cualquier tipo de espacio de tabla, esto no funcionará muy bien.

Otra opción sería usar una imagen de fondo de 1px de alto con los bordes en su interior, pero eso solo funcionará si puede garantizar el ancho de cada celda en todo momento.

Otra posibilidad es experimentar con colgroup/col. Esto tuvo bastante mala compatibilidad con el navegador cruzado la última vez que lo miré pero podría haber mejorado desde entonces: http://www.webmasterworld.com/forum83/6826.htm

Answer 4

No hay una manera fácil de hacer esto, aparte de hacer algo como class = "lastCell" en la última td en cada tr y, a continuación, establecer el CSS de esta manera:

#table td { 
    border-right: 5px solid red 
} 

.lastCell { 
    border-right: none; 
} 

Answer 5

Es necesario configurar un border-right en el TD de entonces apuntar a los últimos TDS en una fila para fijar la frontera para none. Maneras de dirigir:

1. Conjunto una clase en la última td de cada fila y el uso que
2. si se trata de un número determinado de células y solamente la orientación más nuevos navegadores luego 3 células de ancho pueden utilizar td + td + td
3. O mejor (con nuevos navegadores) td:last-child

Answer 6

he usado esto en una hoja de estilo por tres columnas separadas por bordes verticales y funcionó bien:

#column-left { 
    border-left: 1px solid #dddddd; 
} 
#column-center { 
    /*no border needed/* 
} 
#column-right { 
    border-right: 1px solid #dddddd; 
} 

La columna de la izquierda tiene un borde a la derecha, la columna de la derecha tiene un borde a la izquierda y la columna central ya está ocupada por la izquierda y la derecha.

Si sus columnas están dentro de un div/wrapper/table/etc ... no se olvide de agregar espacio adicional para acomodar el ancho de los bordes.

Answer 7

Sé que esto es una cuestión de edad, pero no es un simple, una solución de línea que trabaja constantemente para Chrome, Firefox, etc., Así como Internet Explorer 8 y superiores (y, en su mayor parte, funciona en IE7 también - ver http://www.quirksmode.org/css/selectors/ para más detalles):

table td + td { border-left:2px solid red; } 

La salida es algo como esto:

Col1 | Col2 | Col3 

Lo está haciendo que esto funcione es que está definiendo un borde solo en celdas de tabla que están adyacentes a otra celda de tabla. En otras palabras, está aplicando el CSS a todas las celdas de una fila, excepto la primera.

Al aplicar un borde izquierdo al segundo hasta el último elemento secundario, da la apariencia de que la línea está "entre" las celdas.

Answer 8

Dentro <td>, utilice style="border-left:1px solid #colour;"

Answer 9

de rules Ver tabla de atributos - https://www.w3.org/TR/html401/struct/tables.html#h-11.3.1