Eliminar el espacio entre los bordes verticales de la tabla <td> s

Tengo un currículum que trato de traducir de MS Word a HTML y CSS para facilitar el mantenimiento y el uso compartido. Me gusta el estilo del currículum, y preferiría mantenerlo. Tiene una columna a la izquierda, con títulos como "Educación", "Experiencia", etc. en negrita y alineado a la derecha con respecto a un separador vertical.Eliminar el espacio entre los bordes verticales de la tabla <td> s

En Word, esto se logra mediante una tabla, con el estilo del borde central establecido en sólido y los otros bordes en blanco. Esto permite que los títulos de las secciones se alineen verticalmente con el contenido asociado.

Intenté simplemente duplicar esta técnica, pero en Firefox y Chrome, si configuré una columna de los atributos border-right de los tds como sólidos, hay lagunas en las divisiones verticales de la tabla. Este tipo de ruinas el efecto.

Pensé en usar dos divs, uno con los encabezados y otro con el contenido, pero aparte de las alturas de píxel de codificación fija (que tiene sus propios conjuntos obvios de problemas), no puedo encontrar la manera de mantenerlos verticalmente sincronizado.

¿Hay alguna manera de hacerlo sin perder la capacidad de mantener los títulos y su contenido asociado alineados verticalmente?

código de la tabla se ve algo como

<table> 
<tr><td style="border-right:1px solid black;">Education</td><td> [Name of School, etc.]</td></tr> 
<tr><td style="border-right:1px solid black;">Experience</td><td>[Work experience]</td></tr> 
. 
. 
. 
</table>

Fuente

2012-02-25 Ben Weinstein-Raun

Por favor, explique lo que quiere decir con "brechas en las divisiones verticales de la tabla", y publique un código. –

¿Podría agregar una captura de pantalla o lo que sea para que podamos ver exactamente lo que quiere? –

¿Podría compartir algún código de lo que ha intentado hasta ahora, y tal vez una imagen de lo que está tratando de lograr? Eso sería de mucha ayuda. Puede compartir el código con un [JSFiddle] (http://jsfiddle.net) por ejemplo. –

me gustaría ir con:

table { border-collapse: collapse; }

Se eliminaría las lagunas y permitir bordes de la tabla.

Fuente

2012-02-25 08:25:27

esto realmente responde la pregunta OP ... – mmcrae

En la tabla, establezca el border-spacing: 0; que elimina espacios entre las fronteras de los elementos secundarios TD.

Fuente

2012-02-25 08:25:59 steveukx

lifesaver !, estilos de mesa furtivos –

Usando 'border-collapse: collapse;' dejó pequeños huecos en mi tabla, pero esto los eliminó. ¡Exactamente lo que estaba buscando! – Jez

Por qué hacer su vida más complicada cuando se puede hacer lo siguiente:

convertido word archivo en un huésped pdf & que el uso de HTML o embedobject etiquetas!

edición:http://jsfiddle.net/uday99/WzGeX/2/

Fuente

2012-02-25 08:30:57 uday

Parte del punto es que sigo perdiendo mis archivos .docx y me veo forzado a recrearlos desde un pdf impenetrable. Además, es probable que mi audiencia no tenga un complemento de PDF en su navegador. Prefiero simplemente tener un único archivo editable por vim que luego pueda enviar rápidamente a un servidor, en lugar de pasar por todo ese proceso cada vez que noto un error tipográfico o una experiencia. –

Vea este ejemplo: ¿quiere decir que quiere algo así? Http: //jsfiddle.net/uday99/WzGeX/2/ – uday

En realidad, http://jsfiddle.net/kFGmC/ es casi exactamente lo que estaba esperando. Simplemente no pensé en tratar las etiquetas '' como los elementos de bloque que son. –

Prescindiendo de la tabla es la mejor idea. Puede convertir los encabezados en <h2> elementos (o cualquier nivel de <h> es apropiado) y hacer que flote a la izquierda y darle al texto un margen izquierdo lo suficientemente ancho.

Algo como this jsfiddle, ¿o no es esto lo que quieres?

Fuente

2012-02-25 08:35:26

Excelente, ¡gracias! Habiendo dicho The Right Thing, siempre parece tan obvio. –

Eliminar el espacio entre los bordes verticales de la tabla <td> s

Respuesta

Cuestiones relacionadas