✔ Tabellen trotz border-spacing rechts und links bündig

R

Ria Elliger

Grünschnabel
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: 
<!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
 
Schau mal, ob das klappt:

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%; 
          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>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück