Question

Estoy usando esta tabla:

<table class="chat-message-message-target" style="border: none;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr class="chat-message-top-message-target">
<td class="col-1-top-left-message-target"></td>
<td class="col-1-top-center-message-target"></td>
<td class="col-1-top-right-message-target"></td>
</tr>
<tr class="chat-message-middle-message-target">
<td class="col-1-middle-left-message-target"></td>
<td class="col-1-middle-center-message-target">
<div class="chat-user message-target"></div>
<div class="chat-mensaje">¿QUÉ PUEDO HACER AQUÍ?</div></td>
<td class="col-1-middle-right-message-target"></td>
</tr>
<tr class="chat-message-down-message-target">
<td class="col-1-down-left-message-target"></td>
<td class="col-1-down-center-message-target"></td>
<td class="col-1-down-right-message-target"></td>
</tr>
</tbody>
</table>

Quiero ahora hacer con css que tenga unos bordes como comics, con unas imágenes ya creadas.

.col-1-middle-center-message-target {
    background: #8ED546;
    max-width: 400px;
    padding: 0;
}

.col-1-top-left-message-target {
    background: no-repeat url("./img/vb1.png") 0 3px;
    width: 5px;
}

.col-1-top-center-message-target {
    background: repeat-x url("./img/vbg-sup.png") 0 3px;
}

.col-1-top-right-message-target {
    background: no-repeat url("./img/vb3.png") 0 3px;
    width: 5px;
}

.col-1-middle-left-message-target {
    background: repeat-y url("./img/vbg-left.png") 0 0;
}

.col-1-middle-right-message-target {
    background: repeat-y url("./img/vbg-dch.png") 0 0;
}

.col-1-down-left-message-target {
    background: no-repeat url("./img/vb2.png") 0 -3px;
    width: 5px;
}

.col-1-down-center-message-target {
    background: repeat-x url("./img/vbg-inferior.png") 0 -3px;
}

.col-1-down-right-message-target {
    background: no-repeat url("./img/vb4.png") 0 -3px;
    width: 5px;
}

Pero no consigo que se me vea ningun borde (imagen). ¿Qué estoy haciendo mal?

Comments

¿Lo tienes en alguna URL para verlo?

---

No, he intentado ponerlo en http://jsfiddle.net/ pero no sé como subir las imágenes.

---

Tendrías que subirlas a tu servidor y poner las URLs de las mismas par que funcione ahí.

---

Un segundo, lo subo y te lo paso.

---

http://www.danielreales7.com/estilos/tabla.html ahí lo tienes

Answer 1

Los estilos se están cargando correctamente pero las filas y columnas no se están mostrando porque no tienen contenido. He probado a escribir dentro de tu HTML en las celdas que reservas a los bordes y tus imagenes aparecen.

Se debería solucionar con atributos del tipo min-width y min-height para esas filas y columnas, pero estos atributos no funcionan con elementos de tablas.

Tienes dos opciones:

• Intentar reproducir el mismo funcionamiento con elementos div.
• Insertar las imagenes como imágenes normales en lugar de imágenes de fondo.