table border

[Tobi]

hallo,

ich moechte mit CSS einen style fuer eine tabelle festlegen. sie soll einen 2px dicken rahmen bzw. ein gitternetz haben.

CSS sieht wie folgt aus:

.tableborder { border-width: 2px; border-style: solid; border-color: #000000; }

...und dann im Code:

<table class="tableborder">

Das Problem: der rahmen erscheint nur aussen um die tabelle, die einzelnen zellen haben keinen rahmen....wie bewerkstellige ich mit CSS ein gitternetz rahmen bei der tabelle?

Danke & Gruss
Tobi

[Tim Tepaße]

Hallo Tobi,

.tableborder { border-width: 2px; border-style: solid; border-color: #000000; }

Das Problem: der rahmen erscheint nur aussen um die tabelle, die einzelnen
zellen haben keinen rahmen....wie bewerkstellige ich mit CSS ein gitternetz
rahmen bei der tabelle?

Natürlich nicht, Du hast ja nur im CSS definiert, wie der Rahmen um die
gesamte Tabelle aussehen soll, nicht wie der Rahmen der Zellen aussehen soll.

Also mußt Du noch Definitionen für th und td erstellen oder zu obiger
Definition hinzufügen.

• Tim

[Constantin Kiesling]

Hi!

Du musst die td's auch mit css formatieren, die tr's sind relativ unwichtig.

z.B. so:

.tableborder {border: 1px solid #000000}

[...]

<table class="tableborder" cellspacing="0">
<tr>
<td class="tableborder">

[...]

</td>
</tr>
</table>

Dadurch, dass du den Rahmen auf 1px und cellspacing="0" setzt, bekommst du ingesamt einen Rahmen von 2px in der ganzen Tabelle... probiers mal aus!

lG,
Consti

[Tobi]

Hallo Consti,

Du musst die td's auch mit css formatieren, die tr's sind relativ unwichtig.

Hmmm...hatte wohl ein Brett vorm Kopf...8o( habe in HTML gedacht, wo bei der table das attribut border gesetzt wird und dann fuer alle zellen gilt....

Eigentlich logisch das ch den style nur den zellen zuweisen muss....

Danke fuer die schnelle und gute antwort,
Tobi

[Michael Jendryschik]

.tableborder {border: 1px solid #000000}

[...]

<table class="tableborder" cellspacing="0">
<tr>
<td class="tableborder">

[...]

</td>
</tr>
</table>

<table class="border" cellspacing="0">
  <tr>
  <td>
  <!-- [...] -->
  </td>
  </tr>
  </table>

mit

table.border, table.border td {
     /* border */
  }

finde ich geschickter. 'cellspacing' würde ich darüber hinaus ebenfalls durch geeignete CSS-Eigeschaften ersetzen.

MI