Foros del Web » Creando para Internet » CSS »

Borde de tabla

Estas en el tema de Borde de tabla en el foro de CSS en Foros del Web. Buenas, tengo un problema con el estilo de borde de tabla, queria cambiarselo a punteado o alguno otro porque el "relieve" que viene por defecto ...
  #1 (permalink)  
Antiguo 05/05/2010, 03:14
 
Fecha de Ingreso: mayo-2010
Mensajes: 5
Antigüedad: 7 años, 7 meses
Puntos: 0
Borde de tabla

Buenas, tengo un problema con el estilo de borde de tabla, queria cambiarselo a punteado o alguno otro porque el "relieve" que viene por defecto no me gustaba, pero la unica manera de conseguir que me fuera es a traves de CSS, con una clase y aun asi sigo teniendo un problema: solo me hace los 4 bordes finales de la tabla, no me divide en filas y columnas... tambien probe insertando la clase en cada celda, pero asi me quedan 2 bordes como antes, queria saber si hay alguna manera de evitarlo...
bueno para ser mas grafico aqui dejo la clase CSS, el HTML y un link al resultado que obtengo
Un saludo y gracias

Código:
.bordepunteado { border-style:dotted; border-color:#003300; border-width:1px; border-collapse:collapse;
Código:
<table class="bordepunteado">
<tr>
<th width="60">Imagen</th>
<th width="82">Nombre</th>
<th width="97">DefFis<sup>1</sup></th>
<th width="91">DefMag/Fue</th>
<th width="62">Res<sup>2</sup></th>
<th width="39">Peso</th>
<th width="102">Penaliz. Stamina<sup>3</sup></th>

<th width="76">Notas</th>
<th width="110">Localización</th>
</tr>
<tr>
<td><img src="Armaduras/brushwoodhelmet.jpg"></td>
...
http://soulhunters.comoj.com/Objetos.html
  #2 (permalink)  
Antiguo 05/05/2010, 06:17
Avatar de lbenz  
Fecha de Ingreso: marzo-2003
Ubicación: Haedo
Mensajes: 445
Antigüedad: 14 años, 9 meses
Puntos: 4
Respuesta: Borde de tabla

rey, para arrancar te digo que no soy experto ni mucho menos . . pero en general cuando uso tablas no uso css .

te diria que hagas divs, con divs podes discriminar border top, left, etc . asi podrias resolver tu problema de manera mas efectiva y tambien conseguirias un codigo mas limpio.

Obviamente tendrias un laburo mas grande en cambiar todo, quizas consigas una solucion a lo que bsucas sin sacar las tablas, pero yo te recomiendo, pasa todo a div, manda border a las cuatro posiciones con un bg que se repita verticalmente con la linea punteada para dividir lass columnas .

no creo que te sirva mucho lo que escribi, pero por ahi le pdoes sacar provecho..

saludos
__________________
que fea firma que tenia... prefiero tener esto
  #3 (permalink)  
Antiguo 05/05/2010, 10:48
 
Fecha de Ingreso: mayo-2010
Mensajes: 5
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Borde de tabla

La verdad es que preferiria no tener que cambiar todas las tablas por divs xD si no hay ninguna manera de hacer lo que busco lo dejare como esta, pero deberia haber alguna manera ^^ de todas formas gracias por la ayuda ;)
  #4 (permalink)  
Antiguo 06/05/2010, 02:00
Avatar de anfergon  
Fecha de Ingreso: junio-2009
Mensajes: 42
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Borde de tabla

Hola:

Por lo que veo en el código, has dado estilo a la tabla, pero no a las celdas. Ese es el problema.
Saludos.
  #5 (permalink)  
Antiguo 06/05/2010, 02:31
 
Fecha de Ingreso: mayo-2010
Mensajes: 5
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Borde de tabla

Como ya dije arriba, ya he probado insertando la clase en cada celda, pero de este modo me hace 1 borde recuadrando cada celda, es decir que quedarian 2 bordes entre cada par de celdas, y era lo que queria evitar, pero gracias ^^
  #6 (permalink)  
Antiguo 06/05/2010, 08:10
Avatar de anfergon  
Fecha de Ingreso: junio-2009
Mensajes: 42
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Borde de tabla

Primero: dale el formato que ya tienes a cada celda.
Segundo: a la table debes darle border-spacing: 0; en el css. Debes utilizar una clase nueva para ello.

Tercero: con esto, todos los bordes interiores de la tabla quedan dobles, por lo que te conviene poner uno de los bordes en 0. Si quitas el borde derecho, a la última celda debes darle una clase diferente y marcarle los cuatro bordes de 1px, para que no quede "abierta".

Yo lo haría así:

<table>
<tr>
<th class="bordepunteado" width="60" >Imagen</th>
<th class="bordepunteado" width="82">Nombre</th>
<th class="bordepunteado" width="97">DefFis<sup>1</sup></th>
<th class="bordepunteado" width="91">DefMag/Fue</th>
<th class="bordepunteado" width="62">Res<sup>2</sup></th>
<th class="bordepunteado" width="39">Peso</th>
<th class="bordepunteado" width="102">Penaliz. Stamina<sup>3</sup></th>

<th class="bordepunteado" width="76">Notas</th>
<th class="bordeexterno" width="110">Localización</th>
</tr>
<tr>
<td><img src="Armaduras/brushwoodhelmet.jpg"></td>


y el CSS:

table {
border-spacing: 0px;
}

.bordepunteado { border-style:dotted; border-color:#003300; border-width:1px; border-width:1px; border-collapse:collapse; border-right-width: 0;}

.bordeexterno { border-style:dotted; border-color:#003300; border-width:1px; border-width:1px; border-collapse:collapse; }

Última edición por anfergon; 06/05/2010 a las 08:20 Razón: Me olvidé de una parte de la respuesta

Etiquetas: tablas, bordes
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:30.