| Autor |
Nachricht |
ProXy
Threadersteller
Dabei seit: 03.11.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 31.12.2006 14:00
Titel Tabellen und Borders |
  |
|
Hallo zusammen,
ich wollte eine einfache Tabelle bauen, die einen Rahmen von 1px Breite in der Farbe weiss besitzt. Zusätzlich sollten die Zeilen und Spalten durch einen 1px breiten Rahmen (schwarz) voneinander getrennt werden.
Im Internet Explorer, wird alles richtig dargestellt, im Firefox hingegeben, fehlt die äussere Border, bzw. wird stattdessen eine schwarze Border gesetzt.
Hier mal das CSS:
| Code: | table {
border: 1px solid #FFFFFF;
border-collapse: collapse;
width: 100%;
}
tr.desc td {
background-color: #292829;
border: 1px solid #000000;
font-weight: bold;
padding: 5px;
} |
Kann mir jemand sagen, welches Verhalten richtig ist, und wie ich es wie gewünscht beiden Browsern beibringen kann?
MFG
ProXy
|
|
| |
  |
 |
schattenjaeger
Dabei seit: 03.11.2005
Ort: Kiel
Alter: 34
Geschlecht: 
|
Verfasst So 31.12.2006 17:21
Titel
|
|
|
Hallo, ich kann dir keiner alternative vorschlagen, da ich nicht genau weiß was du vorhast.
hier siehst du ein andwendungsbeispiel. Vieleicht hilft die das weiter.KLICK!
|
|
| |
|
|
|
Anzeige
|
|
|
ProXy
Threadersteller
Dabei seit: 03.11.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 31.12.2006 19:35
Titel
|
|
|
Ich habe mal eben einen Screenshot erstellt, wie ich das gerne hätte:
Ich gebe also der Tabelle den weissen Rahmen, den TRs und TDs den schwarzen Rahmen. Dennoch ist das Resultät nicht wie auf dem Screenshot. Stattdessen sind alle Rahmen (auch der um die Tabelle) schwarz...
|
|
| |
|
|
schattenjaeger
Dabei seit: 03.11.2005
Ort: Kiel
Alter: 34
Geschlecht:
|
Verfasst So 31.12.2006 21:00
Titel
|
|
|
|
also hhmmmm... in Frontpage konnte ich sowas mal machen... aber wie das mit css geht... keine ahnung.. ich schau mal nach, wenn ich wieder zuhause bin
|
|
| |
|
|
monika_g
Dabei seit: 23.01.2006
Ort: Hamburg
Alter: -
Geschlecht: 
|
Verfasst So 31.12.2006 22:54
Titel
|
|
|
Das Problem ist, dass der Firefox die Border der Tabelle an unterster Stelle rendert, der IE legt sie anscheinend oben auf.
Außerdem definierst Du bei den td eine Border ganz herum, wenn Du nur links und unten definierst, dann hättest Du zumindest schonmal einen Teil der weißen Border für die Tabelle sichtbar.
|
|
| |
 |
|
ProXy
Threadersteller
Dabei seit: 03.11.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 31.12.2006 23:41
Titel
|
|
|
| monika_g hat geschrieben: | Das Problem ist, dass der Firefox die Border der Tabelle an unterster Stelle rendert, der IE legt sie anscheinend oben auf.
Außerdem definierst Du bei den td eine Border ganz herum, wenn Du nur links und unten definierst, dann hättest Du zumindest schonmal einen Teil der weißen Border für die Tabelle sichtbar. |
Die Idee hatte ich auch, da ich dann aber jede Ecke mit anderen Styles versehen müsste, habe ich davon Abstand genommen.
Ich habe anschliessend versucht die Tabelle in ein DIV einzubetten und dem DIV die Border zu geben, was dann allerdings passiert ist mehr als seltsam:
Hier mal die Formatierung:
| Code: | div {
border: 1px solid red;
width: 300px;
}
table {
width: 100%;
border-collapse: collapse;
border: 1px solid red;
}
td {
border: 1px solid blue;
} |
Kannst du mir eventuell sagen, weshalb der Firefox die Border links übereinander legt und rechts um 1 Pixel versetzt?
MFG
ProXy
|
|
| |
|
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 02.01.2007 09:53
Titel
|
|
|
| ProXy hat geschrieben: | | Stattdessen sind alle Rahmen (auch der um die Tabelle) schwarz... |
Das liegt an dem border-collapse: collapse;
So würde das gehen (falls ich dein Screenshoot
richtig interpretiere):
| Code: | BODY {
background:red;
}
TABLE {
width:200px;
height:200px;
border:1px solid #fff;
}
TD, TH {
border:1px solid #000;
} |
Weiß aussenrum, schwarz die td und th.
Oder aber so - aussenrum weiß und nur die "Trennlinien" schwarz:
| Code: | BODY {
background:red;
}
TABLE {
width:200px;
height:200px;
border:1px solid #fff;
}
TD, TH {
border-right:1px solid #000;
border-top:1px solid #000;
}
TH {
border-top:0;
}
TD.lastone, TH.lastone {
border-right:0;
} |
html:
| Code: | <table border="0" cellspacing="0" cellpadding="0">
<tr>
<th> </th>
<th> </th>
<th class="lastone"> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td class="lastone"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td class="lastone"> </td>
</tr>
</table> |
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Borders in Safari
[Photoshop] Filter für Borders gesucht
Runde CSS3-Borders: Stand der Dinge !
[css] Forms, Input und Submit & Borders (Firefox Problem
Div´s VS Tabellen...
tabellen
|
|
Willkommen auf dem Portal für Mediengestalter
