nicht angemeldet
Tabellen trotz border-spacing rechts und links bündig
0 0 0 0
0 0 
Gunnar Bittersmann
0 Gunnar Bittersmann
0 Gunnar Bittersmann
0
Tabellen trotz border-spacing rechts und links bündig
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.
Hat jemand schon mal eine Lösung dafür gefunden bzw. einen Workaround?
LG mila
-
Om nah hoo pez nyeetz, mila!
so dass eine Tabelle mit width: 100% eben nicht mehr links und rechts bündig anliegt.
Das riecht nach Layout-tabelle. Stell doch mal ein online-Beispiel zur Verfügung.
Matthias
--
1/z ist kein Blatt Papier.
-
Das riecht nach Layout-tabelle.
Nein, es ist tatsächlich eine echte Inhalts-Daten-Tabelle. Die soll aber natürlich vernünftig aussehen :) Layout-Tabellen nehm ich nicht, glaub mir.
Online-Beispiel ist ein wenig schiwerig, da es um einen großen Kunden geht.
Aber mal als Code-Beispiel das Szenario quick and dirty nachgebaut: (CSS steht sonst natürlich vernünftig in einer Datei, Markup ist formatiert und Tabellen haben auch thead und tfoot usw)
<!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>
-
-
Hallo!
... greift aber natürlich auch auf die Zellen ganz links und ganz rechts,
Dann verhindere das doch, bzw. mach' es rückgängig.
Auf Anhieb würden mir jetzt einfallen- den entsprechenden Zellen eine CSS Klasse zuweisen
- mit den Pseudo-Klassen :first-child und :last-child arbeiten
Gruß Gunther
-
Om nah hoo pez nyeetz, Gunther!
- den entsprechenden Zellen eine CSS Klasse zuweisen
Es gibt keine CSS-Klassen. Klassen sind ein Konzept von HTML und mit dem Klassenselektor ansprechbar.
Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, Matthias!
- den entsprechenden Zellen eine CSS Klasse zuweisen
Es gibt keine CSS-Klassen. Klassen sind ein Konzept von HTML und mit dem Klassenselektor ansprechbar.
Also im mir bekannten "allgemeinen" Sprachgebrauch gibt es definitiv CSS Klassen. Man spricht ja auch von den Pseudo-Klassen. Ob der Sprachgebrauch aus technischer Sicht korrekt ist, will ich nicht beurteilen.
Aber wenn es dich stört, streiche in Gedanken bitte das Wort "CSS" vor Klasse. ;-)
Gruß Gunther
-
@@Gunther:
nuqneH
Also im mir bekannten "allgemeinen" Sprachgebrauch gibt es definitiv CSS Klassen.
Dann ist der dir bekannte "allgemeine" Sprachgebrauch definitiv falsch. Auch wegen des Deppenleerzeichens.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
@@Gunnar:
nuqneH
Also im mir bekannten "allgemeinen" Sprachgebrauch gibt es definitiv CSS Klassen.
Dann ist der dir bekannte "allgemeine" Sprachgebrauch definitiv falsch. Auch wegen des Deppenleerzeichens.
Ja, mag sein ... CSS Klassen ... Ungefähr 950.000 Ergebnisse
Was das Deppenleerzeichen angeht, hast du sicher recht - also "CSS-Klassen"
Gruß Gunther
-
@@Gunther:
nuqneH
CSS Klassen ... Ungefähr 950.000 Ergebnisse
Na, dann fehlen nur noch wenige zur Million Fliegen, die nicht irren können.
Äh, Moment mal. Auch googeln will gelernt sein. "css klassen" sucht nicht nach „CSS-Klassen“, sondern nach allem, was „CSS“ oder „Klassen“ enthält.
Was das Deppenleerzeichen angeht, hast du sicher recht - also "CSS-Klassen"
Das ist orthographisch richtig. Semantisch ist es genau unsinnig wie HDTV-Butter.*
Qapla'
* Bei Schmalz wäre noch eine gewisse Affinität zu Fernsehen denkbar.
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-
Om nah hoo pez nyeetz, Gunther!
Also im mir bekannten "allgemeinen" Sprachgebrauch gibt es definitiv CSS Klassen.
Diese Klassen werden im HTML angegeben. HTML beschreibt die Struktur eines Dokuments:
<p class="anmerkung">Hier ist einer von mehreren Absätzen, die eine Anmerkung beeinhalten.Man spricht ja auch von den Pseudo-Klassen.
Pseudoklassen sind ein Konzept von CSS, nämlich Elemente aufgrund von Benutzeraktionen (schon besuchte Verweise, :hover) oder der Struktur des Dokumentes (:first-child) zu selektieren, ohne dass es in HTML einer Klasse bedarf, was im Falle von :visited & co in HTML auch garnicht möglich wäre, weil HTML als Auszeichnungssprache die Programmierlogik fehlt.
Matthias
--
1/z ist kein Blatt Papier.
-
Um mal zum eigentlichen thema zurückzukommen: :)
Dann verhindere das doch, bzw. mach' es rückgängig.
Ja genau das ist das Problem :) Wie? Tabellen-Zellen haben kein margin (also auch kein negatives). Wie soll ich einer ersten oder letzten Zelle also sagen, dass sie kein border-spacing hat oder das wieder korrigiert? Das ist schließlich eine Eigenschaft der Tabelle und nicht der Zelle.
-
@@mila:
nuqneH
Tabellen-Zellen haben kein margin
Tabellen aber.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
@@Gunnar Bittersmann:
nuqneH
Tabellen-Zellen haben kein margin
Tabellen aber.Ähm, ja, das sagtest du ja bereits.
Dann füllt width: 100% nicht den gesamten Raum aus.
„Darf’s ein bisschen mehr sein?“ 100% + 40px?
table { border-collapse: separate; border-spacing: 20px; margin: 0 -20px; width: 100%; width: -moz-calc(100% + 40px); }Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
„Darf’s ein bisschen mehr sein?“ 100% + 40px?
width: -moz-calc(100% + 40px);ja kenne ich schon, funktioniert aber wie der Name schon sagt nur im Mozilla. Was Browserfestes (zumidnest bis IE7 und die gängigen weniger problematischen Browser) wären aber auch nett.
-
@@mila:
nuqneH
width: -moz-calc(100% + 40px);ja kenne ich schon, funktioniert aber wie der Name schon sagt nur im Mozilla.
Im Firefox ab 4, IIRC.
Was Browserfestes […]
… gibt’s auch.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-
-
Om nah hoo pez nyeetz, mila!
Ja genau das ist das Problem :) Wie? Tabellen-Zellen haben kein margin (also auch kein negatives). Wie soll ich einer ersten oder letzten Zelle also sagen, dass sie kein border-spacing hat oder das wieder korrigiert? Das ist schließlich eine Eigenschaft der Tabelle und nicht der Zelle.
Du könntest padding für die Zellen verwenden und den border-bottom als Hintergrundgrafik mit unterschiedlichen background-clip realisieren.
Matthias
--
1/z ist kein Blatt Papier.
-
Du könntest padding für die Zellen verwenden und den border-bottom als Hintergrundgrafik mit unterschiedlichen background-clip realisieren.
Hmmm klingt zumindest nach einer funktionierenden Lösung. Border aus Grafiken zu machen ist zwar prinzipiell überhauptnicht schön (und im mobilen Bereich erst Recht nicht), aber manchmal geht es nunmal nicht anders..
-
@@mila:
nuqneH
Border aus Grafiken zu machen ist zwar prinzipiell überhauptnicht schön
Bleib deinen Prinzipien treu!
aber manchmal geht es nunmal nicht anders..
Manchmal ist nicht immer. Und hier ist nicht manchmal.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-
-
@@Gunther:
nuqneH
- den entsprechenden Zellen eine CSS Klasse zuweisen
Nein, wozu?
- mit den Pseudo-Klassen :first-child und :last-child arbeiten
Eben.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
@@mila:
nuqneH
ich habe eine Situation, in der ich border-spacing benötige um Zellen horizontal voneinander zu trennen, die einen border-bottom haben.
Padding für die Tabellenzellen möchtest du nicht verwenden, weil …
… der untere Rahmen nicht durchgängig sein soll?
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
@@Gunnar Bittersmann:
nuqneH
Padding für die Tabellenzellen möchtest du nicht verwenden, weil …
… der untere Rahmen nicht durchgängig sein soll?Und auch das geht, wenn nicht die Tabellenzelle selbst den Rahmen bekommt, sondern ein darin befindlcihes Pseudoelement (was durch das Padding der Zelle schmaler ist als diese).
td::after { border-bottom: 1px solid black; content: '\A0'; display: block; line-height: 0; }Zur Unterstützung älterer Browser
:afterauch gern in CSS-2-Syntax mit einem Doppelpunkt.Ggfs. wäre auch noch 'th' im Selektor zu berücksichtigen.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Das ist ziemlich genial. Funktioniert auch fast perfekt. Das einzige Manko, das es noch gibt ist, wenn unterschiedlich hoher Inhalt in den Zellen ist liegt die Linie immer direkt unter dem Inhalt, nicht aber ganz unten an der Zeile. eine absolute Positionierung von after-pseudoelemnten scheint nicht zu funktionieren. Noch eine Idee dazu?
@@Gunnar Bittersmann:
nuqneH
Padding für die Tabellenzellen möchtest du nicht verwenden, weil …
… der untere Rahmen nicht durchgängig sein soll?Und auch das geht, wenn nicht die Tabellenzelle selbst den Rahmen bekommt, sondern ein darin befindlcihes Pseudoelement (was durch das Padding der Zelle schmaler ist als diese).
td::after
{
border-bottom: 1px solid black;
content: '\A0';
display: block;
line-height: 0;
}> > Zur Unterstützung älterer Browser `:after`{:.language-css} auch gern in CSS-2-Syntax mit einem Doppelpunkt. > > Ggfs. wäre auch noch 'th' im Selektor zu berücksichtigen. > > Qapla'-
@@mila:
nuqneH
unterschiedlich hoher Inhalt
Argl, auch das noch!
absolute Positionierung von after-pseudoelemnten scheint nicht zu funktionieren.
Doch, das tut sie im Allgemeinen (mittlerweile). Damit sich die Positionierung des Pseudo-Elements auf dessen Elternelement bezieht, müsste dieses (relativ) positioniert sein.
Scheitert hier an: “The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined. ” [CSS21 §9.3.1]
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
yep. aber ich habe es jetzt mit before gemacht. die Designerin meinte, die Abschlusslinie darf auch durchgehen und die liegt jetzt somit an der Tabelle selbst. Problem gelöst, ich danke dir :)
-
-
@@mila:
nuqneH
Noch eine Idee dazu?
Soll in der letzten Tabellenzeile auch eine Linie drunter sein?
Ansonsten: Nicht ::after mit border-bottom, sondern ::before mit border-top.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-
Padding für die Tabellenzellen möchtest du nicht verwenden, weil …
… der untere Rahmen nicht durchgängig sein soll?
genau. der soll halt jeweils durch X Pixel unterbrochen sein. egnau dafür soll eben das border-spacing herhalten (dafür ist es ja auch da :) )
-
@@mila:
nuqneH
genau. der soll halt jeweils durch X Pixel unterbrochen sein. egnau dafür soll eben das border-spacing herhalten (dafür ist es ja auch da :) )
Besteht noch Hoffnung, dass du die Lösung findest?
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Besteht noch Hoffnung, dass du die Lösung findest?
ja
-
-
-