Borde de tabla

[Nost89]

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

[lbenz]

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

[Nost89]

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 ;)

[anfergon]

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.

[Nost89]

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 ^^

[anfergon]

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¹</th>
<th class="bordepunteado" width="91">DefMag/Fue</th>
<th class="bordepunteado" width="62">Res²</th>
<th class="bordepunteado" width="39">Peso</th>
<th class="bordepunteado" width="102">Penaliz. Stamina³</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; }