HTML CSS Prob

[witzigerkiller]

wie schaffe ich einen rahmen um eine tabelle der so aussieht: www.selfcode.de/lala.jpg

aber die tabelle soll beliebeig groß sein. nicht so klein wie auf dem bild. aber wie schaffe ich denn so einen rahmen? habe es so versucht:

td { border : 1px 1px 1px 1px solid #000000; }

doch dann werden manchmal also eigentlich immer wenn 2 zeilen/spalten aufeinander treffen, die linien dick.

hat jemand eine andere lösung?

[tazzi]

ja klar werden die dick, weil du ja jetzt recht eine linie mit 1 px hast, links eine mit 1px etc.
und wenn zB zwei spalten nebeneinander stehen, "berühren" sich von spalte 1 die linke linie mit 1px mit der rechten linie vvon spalte 2, die auch 1px hat..macht also an der stelle 2 px weil zwei linien mit je 1px nebeneinander stehen.. aber wie man das ändert..k.a.

[witzigerkiller]

ich werde das mal anders versuchen.

[witzigerkiller]

Code: Alles auswählen

<style>
.tdleftoben {
border-left: 1px solid #000000;
border-right: 0px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.tdrightoben {
border-left: 1px solid #000000;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.tdleftcontent {
border-left: 1px solid #000000;
border-right: 0px;
border-top: 0px;
border-bottom: 1px solid #000000;
}
.tdrightcontent {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-top: 0px;
}
</style>

<table cellspacing="0">
 <tr>
  <td class="tdleftoben">&nbsp;Name:&nbsp;</td>
  <td class="tdrightoben">&nbsp;input&nbsp;</td>
 </tr>
 <tr>
  <td class="tdleftcontent">&nbsp;Name:&nbsp;</td>
  <td class="tdrightcontent">&nbsp;input&nbsp;</td>
 </tr>
</table>

Angeben kannst du ein bis vier Werte, die wie folgt verwendet werden:  
Ein Wert  
Rahmenart für alle vier Seiten  
Zwei Werte  
Der erste Wert für die obere und untere, der Zweite für die linke und rechte Rahmenart  
Drei Werte  
Der erste Wert für die obere, der Zweite für die linke und rechte und der Dritte für die untere 

Rahmenart  
Vier Werte  
Der erste Wert für die obere, der Zweite für die rechte, der Dritte für die untere und der Vierte für 

die linke Rahmenart 

so hab ich das jetzt mal versucht
und es geht. jetzt ist mir das aber zuviel css code

[tazzi]

und? gehts besser?

[witzigerkiller]

ja es ging besser.

jetzt habe ich das versucht:

Code: Alles auswählen

<style>
.tdleftoben {
border: 1px 0px 1px 1px solid #000000;
}
.tdrightoben {
border: 1px 1px 1px 1px solid #000000;
}
.tdleftcontent {
border: 0px 0px 1px 1px solid #000000;
}
.tdrightcontent {
border: 0px 1px 1px 1px solid #000000;
}
</style>

<table cellspacing="0">
 <tr>
  <td class="tdleftoben">&nbsp;Name:&nbsp;</td>
  <td class="tdrightoben">&nbsp;input&nbsp;</td>
 </tr>
 <tr>
  <td class="tdleftcontent">&nbsp;Name:&nbsp;</td>
  <td class="tdrightcontent">&nbsp;input&nbsp;</td>
 </tr>
</table>

Ich habe es nach diesem chema gebaut aber es funktioniert nicht. vllt habe ich auch ein fehler. kannst du nochmal gucken. Funzen tut es aber halt mit dicken linien.

Angeben kannst du ein bis vier Werte, die wie folgt verwendet werden:
Ein Wert
Rahmenart für alle vier Seiten
Zwei Werte
Der erste Wert für die obere und untere, der Zweite für die linke und rechte Rahmenart
Drei Werte
Der erste Wert für die obere, der Zweite für die linke und rechte und der Dritte für die untere

Rahmenart
Vier Werte
Der erste Wert für die obere, der Zweite für die rechte, der Dritte für die untere und der Vierte für

die linke Rahmenart

[Markus67]

Hi ...

ein kleiner Tip wie das ganze ohne Rahmen geht

Erstelle eine Tabelle (1 Spalte, 1 Zeile) -> Hintergrundfarbe zuweisen

Erstelle innerhalb der Tabelle eine weitere Tabelle mit cellspacing="1" ....
Der Tabelle weist du wieder eine Hintergrundfarbe zu ...

Das Ergebnis eine Tabelle mit schönen gleichmäßigen dünnen Rahmen

Markus

[witzigerkiller]

ich würde das aber gerne mit css machen

aber ich kann es gerne mal versuchen

[tazzi]

jo, manchmal gehts auch mit einfachstem html

[witzigerkiller]

Code: Alles auswählen

<table cellspacing="0">
 <tr>
  <td bgcolor="#000000">
   <table>
    <tr>
     <td bgcolor="#CCCCCC">Farbe</td>
    </tr>
   </table>
  </td>
  <td bgcolor="#000000">
   <table>
    <tr>
     <td bgcolor="#CCCCCC">Farbe</td>
    </tr>
   </table>
  </td>
 </tr>
 <tr>
  <td></td>
  <td></td>
 </tr>
</table>

ich finde diese methode nciht schön! ich will ja mehrzeilig/spaltig haben, und da wäre css sinnvoller. sonst muss ich halt wieder den ewig großen css code nehmen:

<style>
.tdleftoben {
border-left: 1px solid #000000;
border-right: 0px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.tdrightoben {
border-left: 1px solid #000000;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.tdleftcontent {
border-left: 1px solid #000000;
border-right: 0px;
border-top: 0px;
border-bottom: 1px solid #000000;
}
.tdrightcontent {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-top: 0px;
}
</style>