Border en tr de tabla

[elacunza]

Buenos días chicos!

Estaba intentando crear el siguiente efecto en los tr de una tabla:

http://postimage.org/image/exvcn57fl/

Pero no hay manera de conseguir que el tr me ponga los borders.

¿Alguna idea?

[ipraetoriux]

mmmm directamente en la tabla no, pero podrias hacer una imagen de fondo, y dentro de ella cada celda sin bordes...

[kseso?]

¿Se refiere a hacer algo como en la imagen de abajo?



Sólo es cuestión de aplicar los bordes correspondientes a las celdas y el borde-radius a la celda primera y última tal como se ve.

[C2am]

Bueno, otro ejemplo de que sí se pueden poner bordes redondeados a las tablas.


Solo por jugar un rato, y así quedó, los bordes de las celdas que contienen a los días con algún evento están debidamente referenciados con la aplicación de border-radius a cada celda especifica.

No son imágenes, son bordes los círculos rojos, los ¿cuadracirculos o pseudolimones celestes? (2 Fechas Académicas).

Claro, no funcionan en navegadores viejitos, pero la verdad que no me importa. Se ven todos cuadraditos así que no es demasiado problema.
Supongo que con algún artilugio de javascript, etc se podría ver bien en todos, incluso en IE6.

Saludos


Edito: ¿A tr (fila) se le pueden poner bordes o es a td (celdas) las que se les dibuja el borde?
Digo porque esa fue la pregunta inicial. Veré que puedo averiguar.

[furoya]

( Sí, se puede. El truco está en ponerle display: block . )

[kseso?]

Iniciado por furoya

( Sí, se puede. El truco está en ponerle display: block . )

¡¡¡Bien!!!
Y sorpresa con la especificación, que este detalle se me había pasado.

The effect of border-radius on internal table elements is undefined in CSS3 Backgrounds and Borders, but may be defined in a future specification. CSS3 UAs should ignore border-radius properties applied to internal table elements when ‘border-collapse’ is ‘collapse’.

Así que aquí tenemos un detalle con el que jugar.

[elacunza]

Muchísimas gracias a todos!

Ahora el problema ha mutado y esque las tablas me llevan de cabeza, veréis, yo tengo la siguiente tabla:

<table id="table-design" cellpadding="0" cellspacing="0">
<thead >
<th>Tipo de habitación</th>
<th>Fecha</th>
<th>Precio</th>
<th>Total</th>
<th>Disponibles</th>
<th></th>
</thead>

<tbody>
tipos_habitaciones
<tr>
<td >
descripcion_tipo_habitacion
</td>
<td>
dias_reserva
</td>
<td>
dias_reserva
</td>
<td>
precio
</td>
<td>
disponibles
</td>
</tr>
</tbody>
</table>

Y quiero conseguir el siguiente efecto:

http://postimage.org/image/ya8ibksij/

Pero claro, la tabla está separada por columnas, no por filas ¿Se podría hacer algo?

Un saludo y gracias de nuevo.

[furoya]

Vi tu tabla (a pesar de que no está entre etiquetas [code]), y como no entendí el planteo me decidí a ver la imagen.

Sigo sin entender el planteo; ¿de qué columnas hablas?, ¿no será que sencillamente no sabes CSS y pretendes que alguien lo escriba por ti?.

Tal vez deberías leer algunos tutoriales antes de postear.

[elacunza]

Bueno Furoya, gracias por tu respuesta, a pesar del tono "no he ido al baño hoy", no soy una master en css pero algo se, no pretendo que nadie haga el trabajo por mi, simplemente se me ha presentado una duda y la formulo.

Como digo todavía estoy aprendiendo CSS, aunque llevo un tiempo, al hacerlo de forma autodidacta, suelo encontrarme con dificultades, no creo que sea tan difícil de entender. En este caso se me ha presentado el tema de darle estilo a una tabla y me preguntaba cómo podría hacer el efecto de la imagen en los rows, si la tabla está planteada de esta manera.

Siento si mi post te ha molestado de alguna manera, tampoco creo que sea para ponerse así.

//

En fin, he conseguido realizar la primera tabla:
http://postimage.org/image/mn6znvaz1/

Lo que he hecho ha sido poner bordes top y bottom a cada td, y añadir borde derecho e izquierdo a primer y ultimos td, redondeando (border-bottom-right-radius:20px) etc las esquinas necesarias.
Para la separación entre tr o filas he añadido lo siguiente en el id de la tabla:
border-collapse: separate;
border-spacing:0px 5px;
(por si a alguien le sirve de algo)

Ahora estoy trabajando con la segunda tabla, pero el problema persiste y es que quiero poner color de fondo a la primera fila, pero como comenté, la tabla está realizada de forma que si modifico un td, se modifica toda la columna, ilustro:
http://postimage.org/image/6yztgsqzr/

Al modificar:
http://postimage.org/image/ommkvctid/

Y lo que quiero es cambiar el de la primera fila, no de la primera columna...espero explicarme.

¿Alguien tiene idea?

[furoya]

Iniciado por elacunza

«Bueno Furoya, gracias por tu respuesta, a pesar del tono "no he ido al baño hoy", no soy una master en css pero algo se, no pretendo que nadie haga el trabajo por mi, simplemente se me ha presentado una duda y la formulo.

Como digo todavía estoy aprendiendo CSS, aunque llevo un tiempo, al hacerlo de forma autodidacta, suelo encontrarme con dificultades, no creo que sea tan difícil de entender. En este caso se me ha presentado el tema de darle estilo a una tabla y me preguntaba cómo podría hacer el efecto de la imagen en los rows, si la tabla está planteada de esta manera.»

Estaba por tomar mi compota de ciruelas, pero con leer tu último post ya no hizo falta.
Y lo que sabes es muy poco, sigue aprendiendo. Porque ya se te respondió, aunque por tu escasísimo conocimiento, ni lo viste.


«Siento si mi post te ha molestado de alguna manera, tampoco creo que sea para ponerse así.»

Es para ponerse peor. Pero siempre sirven de excusa para explicar algo obvio.

problema con internet explorer

Y en este caso, también para mostrar un truco poco conocido por los diseñadores, que por supuesto tu ignoraste. Porque no eres diseñador/a; ni sabes de lo que estamos hablando.



«En fin, he conseguido realizar la primera tabla:


Lo que he hecho ha sido poner bordes top y bottom a cada td, y añadir ...

Ahora estoy trabajando con la segunda tabla, pero el problema persiste ..., ilustro:


Al modificar:


Y lo que quiero es cambiar el de la primera fila, no de la primera columna...espero explicarme.

¿Alguien tiene idea? »

Je. Sí, por supuesto.
No solamente no sabes poner BBCode, sino que muestras imágenes en vez del código completo para una tabla. El HTML y el CSS que pusiste dispersos no muestran nada que no puedas copiar de cualquier sitio. Y nada que no conozcamos todos.
Todos los que tengamos el mínimo conocimiento sobre HTML y CSS.

Te diría que volvieses a leer el tema, pero va a ser inútil.

[kseso?]

¡Hasta dónde hemos llegado!

Es de todo punto descorazonador ver que no sólo es cada vez más común este tipo de comportamiento sino que lleva camino de ser el único.

Vemos cómo se ha pasado de ser un foro o plaza pública de exposición, debate y aprendizaje a ser una mera esquina de pedigüeños exigentes que se creen con derecho a recibir todo hecho (¡en código!) sólo porque tienen un problema (su problema y por el que en muchos casos terminarán cobrando ellos).
¡Ah! Sin olvidar a los desubicados. Suelen hacer piña.

¿Es realmente éste el tipo de foro que quieren tener el staff (propiedad y moderación)?
Porque su permisividad con estos comportamientos (por silencio y pasividad), su renuncia a ejercer la moderación activa y visible (supongo que sus razones tendrán) y su dejación de funciones y abandono de los usuarios que hasta el momento procuran mantener un mínimo de calidad, parece indicar que sí.
Que ése es el tipo de foro.

Por cierto, elacunza
No sólo le dieron una respuesta.
Han sido tres, nada menos que tres. Y en una sólo tenía que ver los códigos, están ahí, en el html y css. O es que ¿acaso también desconoce hacer eso?
Y su segunda duda es fruto de que no se ha parado a estudiar y comprender la respuesta a la primera.
Se ve que sus obligaciones le impiden ir a ver lo básico de css. Comprensible que pretenda se lo den hecho, así usted puede dedicarse a lo realmente importante, para usted. Entregar el pedido y cobrar. Para todo lo demás está el foro.

[furoya]

(Uy, y encima volviste para editar. Espero que no sea porque a alguien, que no nombro, se le dio por retobarse.)

Acomodar a estos usuarios es desgastante. Francamente, "nos" arruino el tema. Y que los cacheteen prolijamente los moderadores es un poco difícil; son la imagen del Foro y muchas veces tienen que cuidar las formas. Es más fácil para uno, que no es colaborador, ni moderador ni nada más que un usuario.

Por lo menos la omisión vale para nosotros también. Nos están dejando bastante margen.

Bueno, quizá a ti no; pero reconozcamos que tienes un caracter de m****a..

A tu lado, parece que yo escribo en el Nirvana.

[C2am]

Bueno, supongo que a mi me toca ser el "policia bueno", .

Bien ahora, lo que tienes que hacer para que la primer fila tenga un fondo diferente, o cualquier otra propiedad, es asignarle una clase con las diferencias que quieras.
Algo como

Código CSS:

.primerfila{background: #ff4500}
 

y aplicar ese estilo donde corresponda.
Es una forma de lograr lo que quieres.

Y por favor, elacunza, acostumbrate a mostrar el código que estas usando (html + css) o un enlace, y usa las imágenes solo como refuerzo.

Si no tienes online tu web puedes usar sitios como jsfiddle.net .

Saludos

[furoya]

Una duda, C2am, ¿te parece que elacunza no conoce esa propiedad?
OK, no tiene un "Master en CSSlogía", pero poner un color de fondo lo tiene que saber. Porque si quiere hacer esa tabla, va a tener que saber hasta un poquito más.

Otra duda que tengo, ¿crees que esa página de la captura es un blog personal?. Mmnop; es un sitio comercial.
No se puede meter a hacer eso sin saber un fondo.

No se puede meter en el Foro, sin saber un fondo.

Yo les recomendaría que no se dejaran manipular por esta gente.
Seguirles el juego, puede ser. Caer en su juego, no.

¿Qué pasa si después viene conque 'así como le dices' no puede poner un borde?

[elacunza]

Ufff madremía la que me cae por poner una duda ¿?¿?

Si, edito; estoy leyendo el post, buscando qué es lo que he hecho tan mal y no lo entiendo; he expuesto una duda, me han dado respuestas, he solucionado el problema y he aprendido algo nuevo... Furoya, ¿Dónde está tu problema?

Relax chico.

[furoya]

Iniciado por elacunza

Ufff madremía la que me cae por poner una duda ¿?¿?

Sí, ya vi que es tu costumbre. Si en lugar de venir a pedir por cosas obvias que se solucionan leyendo un tutorial vinieses a colaborar, te caerían cosas mejores.


Si, edito; estoy leyendo el post, buscando qué es lo que he hecho tan mal y no lo entiendo;he expuesto una duda, me han dado respuestas, he solucionado el problema y he aprendido algo nuevo... Furoya, ¿Dónde está tu problema?

Ése es el problema. Mientes. Sigues preguntando lo que ya te respondimos. Porque no lo entiendes o porque vienes a molestar.


Relax chico.

!

[elacunza]

A ver, tengo un problema, no me gusta irme de mal royo. Pido disculpas si os he molestado, en serio. Y os agradezco mucho la ayuda, te lo creas o no Furoya, he aprendido varias cosas gracias a este post.

Un saludo.