bordes de tabla

cris_maco · #1 (**permalink**) 29/07/2007, 11:10

hola!!

He visto lo que venia en las faqs respecto a este tema, pero no queda como desearia.
Yo quiero poner unas lineas verticales separando columnas, para ello lo que vi era pintar la parte derecha de las celdas, pero queda un espacio entre ellas, y yo quisiera que fuera entera hacia abajo.
Una cosa que se me ocurrio era hacer una columna entre medias de 1px y rellenarla, y luego pintar los bordes de abajo y superior para quitar espacios, pero no consigo que me aparezcan estos ultimos bordes:

<table width="600" border="0">
<tr>
<td><div align="center"><strong>FECHA</strong></div></td>
<td width="1px" bgcolor="#000000" style="border-bottom:thin; border-bottom-color:#000000;border-bottom-style:solid;"></td>
<td><div align="center"><strong>HORA</strong></div></td>
<td width="1px" bgcolor="#000000" style="border-bottom:medium; border-bottom-color:#000000; border-bottom-style:solid; "></td>
<td><div align="center"><strong>EXPEDIENTE</strong></div></td>
<td width="1px" bgcolor="#000000"></td>
<td><div align="center"><strong>TIPO</strong></div></td>
<td width="1px" bgcolor="#000000"></td>
<td><div align="center"><strong>SALA</strong></div></td>
</tr>
<tr>
<td> </td>
<td width="1px" bgcolor="#000000" style="border-top:medium; border-top-color:#000000; border-top-style:solid;"></td>
<td> </td>
<td width="1px" bgcolor="#000000" style="border-top:medium; border-top-color:#000000; border-top-style:solid;"></td>
<td> </td>
<td width="1px" bgcolor="#000000" style="border-top:medium; border-top-color:#000000; border-top-style:solid;"></td>
<td> </td>
<td width="1px" bgcolor="#000000" style="border-top:medium; border-top-color:#000000; border-top-style:solid;"></td>
<td> </td>
</tr>
</table>

PatomaS · #2 (**permalink**) 30/07/2007, 19:58

Hola

Si te refieres a la pregunta frecuente 23, le falta el border-collapse: collapse; en el estilo asignado a la tabla.

En cualquier caso, te dejo un ejemplo sencillo:

Código HTML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
	<style type="text/css">
		* {border: 0; margin: 0; padding: 0;}
		html,body { width: 100%; height: 100%; background-color: #ccc; }
		caption {padding: 5px;}
		#Base { width: 50%; padding-left: 25%; }
		#tabla {
			width: 100%;
			border: 1px solid #fff;
			border-collapse: collapse;
		}
		.a{
			border-right: 1px solid #f00;
		}
		.b{
			border-right: 1px solid #0f0;
		}
	</style>
	<title>Pruebilla</title>
</head>
<body>
<div id="Base">
	<table id="tabla">
		<caption>Ejemplo de bordes en una tabla</caption>
		<tr>
			<td class="a"><p>&nbsp;</p></td>
			<td class="b"><p>&nbsp;</p></td>
			<td><p>&nbsp;</p></td>
		</tr>
		<tr>
			<td class="a"><p>&nbsp;</p></td>
			<td class="b"><p>&nbsp;</p></td>
			<td><p>&nbsp;</p></td>
		</tr>
	</table>
</div>
</body>
</html>

Felicidad