Foros del web, para los que viven de bits

Henki · 07-may-2008, 11:32

Os explico un par de problemas que tengo con una tabla, a ver si podeis darme alguna pista de como solucionarlo. Pongo una imagen para ilustrar mejor el problema:

En la imagen se ve la ultima columna de una table de cuatro generada dinamicamente. Las tres primeras son para nombre y dos apellidos y no dan ningun problema. Esta ultima tiene que contener varios valores, y para mostrarlos de forma estetica y facil de leer, he creado una tabla dentro de cada fila, ostrando solo las lineas verticales como se puede ver. Cada una de las celdas que contienen los numeros estan definidas a 40 pixeles, para que sean todas iguales y faciliten la lectura. Pero en las filas más largas, las que generan el ancho de la tabla principal, en lugar de mantener este tamaño de 40 pixeles por cada una de las miniceldas, estas se juntan para ocupar el minimo espacio posible, con lo que se pierde la uniformidad de tamaño de todas las casillas, como se puede ver en la penultima fila de la imagen. Por que sucede esto y como se podria solucionar?
Y el segundo problema es que para que en las celdas que contienen los numeros solo se visualice el borde vertical, he usado la orden rules="cols". Supuestamente es un estandar propuesto por microsoft, pero solo me funciona en el firefox, en internet explorer se visualizan todos los bordes para cada casilla lo que queda bastante mas feo. Hay alguna directiva o atributo para hacer lo mismo que sirva para internet explorer?
un saludo y gracias

bookmaster · 07-may-2008, 13:56

¿Has probado a darles el formato con CSS?

Supongo que habras puesto las celdas como <td width="40">, prueba a ponerlas <td style="width: 40px;">

Aparte con el CSS podrás controlar lo que dices de los bordes con las propiedades border.

Cita:

Estilo border-color
Este estilo nos permite indicar el color del borde del elemento al que se lo aplicamos. Este color se le indica con el modo RGB o con el nombre del color.

Podemos aplicar el color a todos los bordes con el atributo “border-color” o podemos indicar el color de cada borde mediante los atributos “border-top-color” para el borde de arriba, “border-right-color” para el borde de la derecha, “border-bottom-color” para el borde de abajo y “border-left-color” para el de la izquierda.

Estilo border-style

Este estilo nos permite indicar el estilo del borde del elemento al que se lo aplicamos.

Podemos aplicar el estilo a todos los bordes con el atributo “border-style” o podemos indicar el estilo de cada borde mediante los atributos “border-top-style” para el borde de arriba, “border-right-style” para el borde de la derecha, “border-bottom-style” para el borde de abajo y “border-left-style” para el de la izquierda.

Estilo border-width

Este estilo nos permite indicar el tamaño del borde del elemento al que se lo aplicamos. El tamaño se lo debemos indicar con alguna de las unidades CSS.

Podemos aplicar el tamaño a todos los bordes con el atributo “border-width” o podemos indicar el tamaño de cada borde mediante los atributos “border-top-width” para el borde de arriba, “border-right-width” para el borde de la derecha, “border-bottom-width” para el borde de abajo y “border-left-width” para el de la izquierda.

Estilo border

El estilo border utilizado sólo, sirve para establecer los atributos que le indiquemos a los cuatro bordes del elemento al que se lo aplicamos. Al border podemos especificarle un “width”, un “style “ y un “color” y éstos se aplicarán a los cuatro bordes del elemento.

Texto tomado desde : http://css.hazunaweb.com/210.php

Henki · 07-may-2008, 15:25

Poniendolo con style tal como dices me hace exactamente lo mismo. Y lo del border no condigo que me haga nada, tengo que seguir estudiandolo. Pero una cosa, si un tag tiene varias cossa para poner en style (width=40, color=#FFFFFF, etc) como se ponen? Dentro del mismo style separados por;, cada uno con su style=... o como?
salu2 y gracias

bookmaster · 07-may-2008, 16:31

Para poner varias cosas dentro de una misma linea usando CSS es separandolos con ;

Un ejemplo:

Código HTML:

<td style="width: 40px; border:0; border-bottom-style: solid; border-bottom-width:1px; border-bottom-color:#000000;">

O bien puedes crearlo en una hoja CSS de la siguiente manera y después llamarle desde el TD.

Código HTML:

<style type="text/css">
.Personalizado{
    width: 40px; 
    border:0; 
    border-bottom-style: solid; 
    border-bottom-width:1px; 
    border-bottom-color:#000000;
}
</style>

<td class="Personalizado">

Henki · 10-may-2008, 08:46

Hola
gracias por la informacion, lo probado y funciona correctamente, me refiero a que las casillas se formatean coprrectamente segun lo definido anterioremente como clase. Pero no obstante sigo teniendo el problema del reescalado de las casillas; es decir, en la definicion de la clase de casilla las especifico con width:40px, y esto se cumple en las casillas que no rellenan toda una fila de la tabla, como se puede ver en la imagen que he puesto arriba del post. Las filas que estan rellenas de casillas hasta el final, es decir, las filas que definen el tamaño de la tabla, no cumplen esta escala y las casillas se ajustan para ocupar el minimo espacio posible. Hay una forma de solucionarlo y seria ajustar el ancho de la tabla para asegurarse de que sea siempre mayor que la fila mas larga, pero preferiria no tener que usar valores absolutos si no fuera imprescindible. Sabeis por que me sucede esto y alguna forma de solucionarlo?
Otra cosa que he solucionado es usar el border-right para definir un borde separador y que me lo reconozca tambien en el internet explorer. Con solo una pequeña limitacion, y es que con rules="cols" mostraba solo los bordes internos, mientras que ahora con border-right muestro el borde derecho, con lo que el ultimo valor de cada fila antes no tenia borde y ahora si. Hay alguna forma con las opciones de estilo de bordes de css de definir solo los bordes internos?
un saludo y muchas gracias

a2a2 · 10-may-2008, 11:33

Cita:

Iniciado por Henki

...
Hay alguna forma con las opciones de estilo de bordes de css de definir solo los bordes internos?
un saludo y muchas gracias

Para trabajar con bordes en tablas se usa la propiedad "border-collapse" que tiene dos valores principales: collapse y separate. En tu caso creo que el más adecuado sería "border-collapse: separate".
Mas información en w3c: Table Borders

Henki · 11-may-2008, 08:41

Tendre que estudirlo con detalle, pero puesto asi no veo que es lo que me hace esta funcion. Si uso e border-collapse debe ser en sustitucion al border-right o ademas de el? Lo he probado de ambas formas y no consigo que se me dibuje ningun borde
un saludo y gracias

07-may-2008, 11:32	#1 (permalink)
Henki Fecha de Ingreso: febrero-2008 Mensajes: 74	Problemillas con una tabla Os explico un par de problemas que tengo con una tabla, a ver si podeis darme alguna pista de como solucionarlo. Pongo una imagen para ilustrar mejor el problema: En la imagen se ve la ultima columna de una table de cuatro generada dinamicamente. Las tres primeras son para nombre y dos apellidos y no dan ningun problema. Esta ultima tiene que contener varios valores, y para mostrarlos de forma estetica y facil de leer, he creado una tabla dentro de cada fila, ostrando solo las lineas verticales como se puede ver. Cada una de las celdas que contienen los numeros estan definidas a 40 pixeles, para que sean todas iguales y faciliten la lectura. Pero en las filas más largas, las que generan el ancho de la tabla principal, en lugar de mantener este tamaño de 40 pixeles por cada una de las miniceldas, estas se juntan para ocupar el minimo espacio posible, con lo que se pierde la uniformidad de tamaño de todas las casillas, como se puede ver en la penultima fila de la imagen. Por que sucede esto y como se podria solucionar? Y el segundo problema es que para que en las celdas que contienen los numeros solo se visualice el borde vertical, he usado la orden rules="cols". Supuestamente es un estandar propuesto por microsoft, pero solo me funciona en el firefox, en internet explorer se visualizan todos los bordes para cada casilla lo que queda bastante mas feo. Hay alguna directiva o atributo para hacer lo mismo que sirva para internet explorer? un saludo y gracias

07-may-2008, 13:56	#2 (permalink)
bookmaster Fecha de Ingreso: noviembre-2002 Ubicación: Toledo Mensajes: 576	Re: Problemillas con una tabla ¿Has probado a darles el formato con CSS? Supongo que habras puesto las celdas como <td width="40">, prueba a ponerlas <td style="width: 40px;"> Aparte con el CSS podrás controlar lo que dices de los bordes con las propiedades border. Cita: Estilo border-color Este estilo nos permite indicar el color del borde del elemento al que se lo aplicamos. Este color se le indica con el modo RGB o con el nombre del color. Podemos aplicar el color a todos los bordes con el atributo “border-color” o podemos indicar el color de cada borde mediante los atributos “border-top-color” para el borde de arriba, “border-right-color” para el borde de la derecha, “border-bottom-color” para el borde de abajo y “border-left-color” para el de la izquierda. Estilo border-style Este estilo nos permite indicar el estilo del borde del elemento al que se lo aplicamos. Podemos aplicar el estilo a todos los bordes con el atributo “border-style” o podemos indicar el estilo de cada borde mediante los atributos “border-top-style” para el borde de arriba, “border-right-style” para el borde de la derecha, “border-bottom-style” para el borde de abajo y “border-left-style” para el de la izquierda. Estilo border-width Este estilo nos permite indicar el tamaño del borde del elemento al que se lo aplicamos. El tamaño se lo debemos indicar con alguna de las unidades CSS. Podemos aplicar el tamaño a todos los bordes con el atributo “border-width” o podemos indicar el tamaño de cada borde mediante los atributos “border-top-width” para el borde de arriba, “border-right-width” para el borde de la derecha, “border-bottom-width” para el borde de abajo y “border-left-width” para el de la izquierda. Estilo border El estilo border utilizado sólo, sirve para establecer los atributos que le indiquemos a los cuatro bordes del elemento al que se lo aplicamos. Al border podemos especificarle un “width”, un “style “ y un “color” y éstos se aplicarán a los cuatro bordes del elemento. Texto tomado desde : http://css.hazunaweb.com/210.php __________________ http://www.lohacemosweb.net http://www.muebles-ahorraymas.com http://www.limpiezas-fh.com

07-may-2008, 15:25	#3 (permalink)
Henki Fecha de Ingreso: febrero-2008 Mensajes: 74	Re: Problemillas con una tabla Poniendolo con style tal como dices me hace exactamente lo mismo. Y lo del border no condigo que me haga nada, tengo que seguir estudiandolo. Pero una cosa, si un tag tiene varias cossa para poner en style (width=40, color=#FFFFFF, etc) como se ponen? Dentro del mismo style separados por;, cada uno con su style=... o como? salu2 y gracias

07-may-2008, 16:31	#4 (permalink)
bookmaster Fecha de Ingreso: noviembre-2002 Ubicación: Toledo Mensajes: 576	Re: Problemillas con una tabla Para poner varias cosas dentro de una misma linea usando CSS es separandolos con ; Un ejemplo: Código HTML: <td style="width: 40px; border:0; border-bottom-style: solid; border-bottom-width:1px; border-bottom-color:#000000;"> O bien puedes crearlo en una hoja CSS de la siguiente manera y después llamarle desde el TD. Código HTML: <style type="text/css"> .Personalizado{ width: 40px; border:0; border-bottom-style: solid; border-bottom-width:1px; border-bottom-color:#000000; } </style> <td class="Personalizado"> __________________ http://www.lohacemosweb.net http://www.muebles-ahorraymas.com http://www.limpiezas-fh.com

10-may-2008, 08:46	#5 (permalink)
Henki Fecha de Ingreso: febrero-2008 Mensajes: 74	Re: Problemillas con una tabla Hola gracias por la informacion, lo probado y funciona correctamente, me refiero a que las casillas se formatean coprrectamente segun lo definido anterioremente como clase. Pero no obstante sigo teniendo el problema del reescalado de las casillas; es decir, en la definicion de la clase de casilla las especifico con width:40px, y esto se cumple en las casillas que no rellenan toda una fila de la tabla, como se puede ver en la imagen que he puesto arriba del post. Las filas que estan rellenas de casillas hasta el final, es decir, las filas que definen el tamaño de la tabla, no cumplen esta escala y las casillas se ajustan para ocupar el minimo espacio posible. Hay una forma de solucionarlo y seria ajustar el ancho de la tabla para asegurarse de que sea siempre mayor que la fila mas larga, pero preferiria no tener que usar valores absolutos si no fuera imprescindible. Sabeis por que me sucede esto y alguna forma de solucionarlo? Otra cosa que he solucionado es usar el border-right para definir un borde separador y que me lo reconozca tambien en el internet explorer. Con solo una pequeña limitacion, y es que con rules="cols" mostraba solo los bordes internos, mientras que ahora con border-right muestro el borde derecho, con lo que el ultimo valor de cada fila antes no tenia borde y ahora si. Hay alguna forma con las opciones de estilo de bordes de css de definir solo los bordes internos? un saludo y muchas gracias

10-may-2008, 11:33	#6 (permalink)
a2a2 Fecha de Ingreso: marzo-2008 Mensajes: 303	Re: Problemillas con una tabla Cita: Iniciado por Henki ... Hay alguna forma con las opciones de estilo de bordes de css de definir solo los bordes internos? un saludo y muchas gracias Para trabajar con bordes en tablas se usa la propiedad "border-collapse" que tiene dos valores principales: collapse y separate. En tu caso creo que el más adecuado sería "border-collapse: separate". Mas información en w3c: Table Borders __________________ Grupos de música Pop/Rock Music PopStars

11-may-2008, 08:41	#7 (permalink)
Henki Fecha de Ingreso: febrero-2008 Mensajes: 74	Re: Problemillas con una tabla Tendre que estudirlo con detalle, pero puesto asi no veo que es lo que me hace esta funcion. Si uso e border-collapse debe ser en sustitucion al border-right o ademas de el? Lo he probado de ambas formas y no consigo que se me dibuje ningun borde un saludo y gracias

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado