tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
1
ZUGRIFFE
445
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 17.05.11 13:44 #1
    Ria Elliger Ria Elliger ist offline Grünschnabel
    Registriert seit
    May 2011
    Beiträge
    1
    Hallo,

    ich habe eine Situation, in der ich border-spacing benötige um Zellen horizontal voneinander zu trennen, die einen border-bottom haben. Border-right bzw border-left sorgen ja für schräg abgeschnittene Ränder in den Ecken. Das border-spacing greift aber natürlich auch auf die Zellen ganz links und ganz rechts, so dass eine Tabelle mit width: 100% eben nicht mehr links und rechts bündig anliegt. Ein margin: 0 -Xpx; der Tabelle schiebt es zwar links wieder bündig, sorgt aber natürlich dafür, dass rechts mehr Abstand entsteht.

    Und eh gefragt wird: nein, es ist keine Layout-Tabelle sondern eine semantsich vollkommen richtige Daten-Tabelle :)

    Hat jemand schon mal eine Lösung dafür gefunden bzw. einen Workaround?

    So zum anschauen mal ein quick-and-dirty Prototyp:

    HTML-Code:
    <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<style>
    * {margin: 0; padding: 0;}
    table {border-collapse: separate; border-spacing: 20px; width: 100%;}
    table td {border-bottom: 1px solid #000;}
</style>
</head>
<body><div>
<table>
<tbody>
<tr><td>Daten</td><td>Daten</td><td>Daten</td></tr>
<tr><td>Daten</td><td>Daten</td><td>Daten</td></tr>
<tr><td>Daten</td><td>Daten</td><td>Daten</td></tr>
</tbody>
</table>
</div>
</body>
</html>
    LG mila
     
    Zitieren Zitieren
  2. 17.05.11 15:59 #2
    Netzwerkidi Netzwerkidi ist offline Mitglied Gold
    Registriert seit
    Oct 2010
    Beiträge
    237
    Blog-Einträge
    1
    Schau mal, ob das klappt:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

    <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<style>
    * {margin: 0; padding: 0;}
    table {border-collapse: separate; border-spacing: 20px; width: 100%; 
          margin-left:-20px;} /* ****** */
    table td {border-bottom: 1px solid #000;}
</style>
</head>
<body><div>
<table>
<tbody>
<tr><td>Daten</td><td>Daten</td><td>Daten</td></tr>
<tr><td>Daten</td><td>Daten</td><td>Daten</td></tr>
<tr><td>Daten</td><td>Daten</td><td>Daten</td></tr>
</tbody>
</table>
</div>
  <script>
  var scr = (screen.width+40)+"px";
  document.getElementsByTagName("TABLE")[0].style.width=scr;
  </script>  
</body>
</html>
     
    Zitieren Zitieren
« CSS Navigation horizontal mit mouseover? | vertikale Navigation mit horizontalem Drop-Menü? »

Ähnliche Themen

  1. Probleme mit Border-Spacing
    Von Tommy57 im Forum CSS
    Antworten: 6
    Letzter Beitrag: 14.01.11, 10:52
  2. rechts ,zentriert und links bündig auf einer Zeile
    Von jfg1 im Forum HTML & XHTML
    Antworten: 4
    Letzter Beitrag: 31.10.10, 19:24
  3. Tabellen nicht bündig mit footer ( PHP )
    Von Avery im Forum HTML-Editoren
    Antworten: 0
    Letzter Beitrag: 24.11.07, 21:39
  4. Weißer Rand, trotz border 0
    Von ZIG-ZAG im Forum HTML & XHTML
    Antworten: 4
    Letzter Beitrag: 30.03.07, 15:59
  5. border-spacing?
    Von goodfella im Forum CSS
    Antworten: 5
    Letzter Beitrag: 22.01.05, 23:20

Stichworte