juntar bordes en tablas (td) ?

Lokitozzz · #1 (**permalink**) 12/10/2012, 16:43

Buenas, estoy editando un poco mi web & tengo unos problemas con algunos códigos CSS o HTML, no sé que es.

Les cuento, tengo una tabla & a los td les puse bordes para que se vean mas 'bonitos' (En la imagen que dejare se ve mal, ya que es algo modular.)

Como se ve en la imagen, los bordes rojos están separados unos de otros & eso es lo que no quiero.. necesito que se vea un rectángulo sin cortes en medio.

Les dejo el html que uso, donde estoy usando style="" para lo que quiero:

Código HTML:

Ver original<table border="0" cellspacing="5" cellpadding="6">
    <tbody>
        <tr>
            <td colspan="1" align="center" valign="top" width="1" style="border: 1px solid red; border-right: 0;"></td>
            <td colspan="1" valign="top" style="border: 1px solid red; border-left: 0; border-right: 0;"></td>
            <td width="85" valign="top" align="center" style="white-space: nowrap; border: 1px solid red; border-left: 0; border-right: 0;"></td>
            <td width="200" valign="top" align="right" style="white-space: nowrap; border: 1px solid red; border-left: 0;"><div style="text-align: center;"></div></td>
        </tr>
    </tbody>
</table>

Que puedo hacer para evitar esos espacios?

pzin · #2 (**permalink**) 12/10/2012, 17:40

Tienes que colapsar los bordes a la tabla.

Código CSS:

Ver originalborder-collapse:collapse;

Y como consejo, no estaría mal que especificaras los atributos en un fichero CSS externo. Es más cómodo y rápido trabajar de esa forma.

Lokitozzz · #3 (**permalink**) 12/10/2012, 17:45

Pero donde pongo lo del border-collapse, en el CSS?

Si estoy usando un CSS externo, solo que para editarlo lo hice así, luego lo paso a mi hoja de estilos.

pzin · #4 (**permalink**) 12/10/2012, 17:48

Se lo tienes que poner, como dije, a la tabla.

Lokitozzz · #5 (**permalink**) 12/10/2012, 17:58

Pero si pongo lo que me dijiste se juntan todos, pero quiero que quede un espacio en cada <tr>.

Trate con margin-bottom, pero no funciona. Que puedo hacer en este caso?

emprear · #6 (**permalink**) 12/10/2012, 18:02

Podés hacer algo así

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
 
<style type="text/css">
/*<![CDATA[*/
table {
border-collapse: separate;
border-spacing: 0px 5px; 
background: blue;
border-left: 3px solid blue;
border-right: 3px solid blue;
}
 
td{
border-top: 2px solid #000;
border-bottom: 2px solid #000;
background: cyan;
}
/*]]>*/
</style>
</head>
<body>
    <p>tabla 1</p>
<table cellspacing="0" cellpadding="6" id="uno">
 
        <tr class="fila">
            <td colspan="1" align="center" valign="top" width="1">texto</td>
            <td colspan="1" valign="top">texto</td>
            <td width="85" valign="top" align="center">texto</td>
            <td width="200" valign="top" align="right"><div style="text-align: center;">texto</div></td>
        </tr>
        <tr class="fila">
            <td colspan="1" align="center" valign="top" width="1">texto</td>
            <td colspan="1" valign="top">texto</td>
            <td width="85" valign="top" align="center">texto</td>
            <td width="200" valign="top" align="right"><div style="text-align: center;">texto</div></td>
        </tr>
 
</table>
</body>
</html>

faltaría que le des un borde izquierdo a la primer celda de cada fila y un derecho a la última

SAludos

pzin · #7 (**permalink**) 12/10/2012, 18:08

Fíjate tú, que no te entendí. Pues ya con lo de emprear vas servido.

flashmax · #8 (**permalink**) 12/10/2012, 18:17

hola no sera esto el problema <table border="0" cellspacing="5" cellpadding="6">
<table border="0" cellspacing="0" cellpadding="6">

pzin · #9 (**permalink**) 12/10/2012, 18:45

Cita:

Iniciado por flashmax

hola no sera esto el problema <table border="0" cellspacing="5" cellpadding="6">

Es el problema pero también lo que busca. Quiere tener el espaciado en horizontal, pero no en vertical. De ahí el código de emprear.

Lokitozzz · #10 (**permalink**) 12/10/2012, 19:10

Probé con todo lo que pusieron & aún lo sigo viendo de la misma manera :/

El código de emprear me dejo aún mas confundido con esto ><

furoya · #11 (**permalink**) 13/10/2012, 07:23

Es que te estás explicando para el tujes.

Pero me parece que ya adiviné. Y entonces tu pregunta se justifica, porque a pesar de que ya lo publicamos en este Foro, no mucha gente conoce el truco. De otra forma, te mandaría a aprender diseño web.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TÍTULO</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

</head>
<body>
    <p>tabla 1</p>

<table border="0" cellspacing="5" cellpadding="0" bgcolor="silver"  >
    <tbody>
        <tr style="border-collapse: collapse; border: 1px solid red; 
display: block; padding: 5px; ">
            <td align="center" valign="top" style="width: 30px; 
background-color: gray; empty-cells: show; ">
&nbsp;
</td>
            <td align="center" valign="top" style="width: 300px; background-color: lime; ">
<div style="background-color: black; text-align: center; width: 300px; 
margin-right: 40px; color: white; ">
div</div>
</td>
            <td align="center" valign="top" style="empty-cells: show; ">
<div style="background-color: yellow; text-align: center; ">
texto <br>celda</div> 
</td>
            <td align="center" valign="top" style="width: 30px; 
background-color: gray; empty-cells: show; ">
&nbsp;
</td>
        </tr>
        <tr style="border-collapse: collapse; border: 1px solid red; 
display: block; padding: 5px; margin-top: 5px; ">
            <td align="center" valign="top" style="width: 30px; 
background-color: gray; empty-cells: show; ">
&nbsp;
</td>
            <td align="center" valign="top" style="width: 300px; background-color: lime; ">
<div style="background-color: black; text-align: center; width: 300px; 
margin-right: 40px; color: white; ">
div</div>
</td>
            <td align="center" valign="top" style="empty-cells: show; ">
<div style="background-color: yellow; text-align: center; ">
texto <br>celda</div> 
</td>
            <td align="center" valign="top" style="width: 30px; 
background-color: gray; empty-cells: show; ">
&nbsp;
</td>
        </tr>
    </tbody>
</table>
 
</body>
</html>

Te marqué las celdas con distintos colores, para que podás seguir más fácil el diseño con el código.

Border en tr de tabla

emprear · #12 (**permalink**) 13/10/2012, 07:50

Creo que aquí una vez más se aplica el viejo axioma

"El que no sabe lo que busca, no encuentra lo que necesita"

Mi código, que al parecer, confunde a nuestro amigo @Lokitozzz, no hace más que lo que el sugiere a través de la imagen, salvo claro está, esas manchas negras que vaya uno a saber que representan

A las pruebas me remito

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
 
<style type="text/css">
/*<![CDATA[*/
table {
border-collapse: separate;
border-spacing: 0px 5px; 
background: #677A85;
border-left: 5px solid #677A85;
border-right: 5px solid #677A85;
}
td{
border-top: 1px solid red;
border-bottom: 1px solid red;
height: 50px;
}
.inicio{
border-left: 1px solid red;
}
.fin{
border-right: 1px solid red;
}
 
/*]]>*/
</style>
</head>
<body>
        <p>imagen</p>
        <img src="http://i.imgur.com/n4GSp.png" alt="" width="900" />
    <p>tabla</p>
<table cellspacing="0" cellpadding="6" width="900">
 
        <tr class="fila">
            <td colspan="1" align="center" valign="top" width="1" class="inicio">texto</td>
            <td colspan="1" valign="top">texto</td>
            <td width="85" valign="top" align="center">texto</td>
            <td width="200" valign="top" align="right" class="fin"><div style="text-align: center;">texto</div></td>
        </tr>
        <tr class="fila">
            <td colspan="1" align="center" valign="top" width="1" class="inicio">texto</td>
            <td colspan="1" valign="top">texto</td>
            <td width="85" valign="top" align="center">texto</td>
            <td width="200" valign="top" align="right" class="fin"><div style="text-align: center;">texto</div></td>
        </tr>
        <tr class="fila">
            <td colspan="1" align="center" valign="top" width="1" class="inicio">texto</td>
            <td colspan="1" valign="top">texto</td>
            <td width="85" valign="top" align="center">texto</td>
            <td width="200" valign="top" align="right" class="fin"><div style="text-align: center;">texto</div></td>
        </tr>
</table>
</body>
</html>

Saludos

furoya · #13 (**permalink**) 13/10/2012, 08:23

Sí, justamente. En vez de mostrar lo que ya tiene en el código, podría editar la imagen y mostrar lo que está buscando. Así no tenemos que adivinar y tirar mil ideas.

Ya van 12 post, ¡y menos mal que aprovechamos para tirar esas (casi) mil ideas!; de otra forma sería otro tema olvidable.

Lokitozzz · #14 (**permalink**) 13/10/2012, 09:16

Gracias furoya y emprear, con los dos últimos códigos que pusieron logre lo que quería.

Lo de las manchas negras solo era para tapar el contenido, digamos que había un poco de spam y quise evitar eso.

Muchas gracias a los dos :D

furoya · #15 (**permalink**) 13/10/2012, 11:06

De nada.

Y sí, al principio creí que esos rectángulos eran div's adentro de las celdas, hasta que me avivé que eran tachaduras. Supuse que detras habría publicidad.

Justamente por tomarte esa molestia, y por poner código adentro de etiquetas de código, fue que me decidí a acompañar a los amigos Bonez, flashmax y emprear.

Lokitozzz · #16 (**permalink**) 13/10/2012, 11:25

Ya luego de darle algo mas de estilo al table y todo me ha quedado así:

Y en vez de usar:

Código CSS:

Ver original.inicio{
    border-left: 1px solid red;
}
 
.fin{
    border-right: 1px solid red;
}

Use:

Código CSS:

Ver originaltd:first-child {
    border-left: 1px solid red;
}
 
td:last-child {
    border-right: 1px solid red;
}

Así se evita algo de código extra.

Saludos y gracias :D