zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Caption exakt so breit wie Tabelle

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.12.2005, 09:59
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.326
AndreasB wird schon bald berühmt werden
Standard Caption exakt so breit wie Tabelle

Hallo,

ich möchte gerne mit schlankem und elegantem (also gerne ohne Verrenkungen) CSS erreichen, dass CAPTION stets exakt die gleiche Breite einnimmt wie die zugehörige Tabelle.

Details:

* Tabelle ist mit kollabierenden Rahmen gestaltet
* Zellen und Caption besitzen dasselbe Padding
* Caption soll keinen Rahmen besitzen
* Caption soll sich von Aussenkante Rahmen links bis Aussenkante Rahmen rechts erstrecken.

In Firefox z.B. bleibt beim Testcase stets eine "Treppenstufe" zwischen Caption und Tabelle.
In Opera oder IE nicht.

Vermutlich habe ich Tomaten auf den Augen. Oder doch nicht?

Testcase:

http://borumat.de/test-caption.php

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Tabelle mit Caption</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{
background: gray;
}
table{
border-collapse: collapse;
}
table caption{
background: green;
padding: 0.3em;
margin: 0;
}
table th{
background: red;
border: 5px solid white;
padding: 0.3em;
}
table td{
background: yellow;
border: 5px solid white;
padding: 0.3em;
}

</style>
</head>
<body>
<h1>Tabelle mit Caption </h1>
<table>
	<caption>Lorem</caption>
	<tr>
		<th>Ipsum</th>
		<td>Doloret</td>
	</tr>
	<tr>
		<th>Sit</th>
		<td>Amet</td>
	</tr>
</table>
</body>
</html>
[/code][/quote]
__________________

Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.12.2005, 17:40
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Du hast keine Tomaten auf den Augen. Aber Firefox und Safari folgen hier der Spezifikation, auch wenn es unsinnig erscheint.

http://www.w3.org/TR/CSS21/tables.ht...apsing-borders
The collapsing border model

weiter unten, unter der Grafik:

Zitat:
Note that in this model, the width of the table includes half the table border.
Wenn die caption nun die Breite der Tabelle einnimmt, so fehlt ihr zweimal die Hälfte der Border zur optische Weite dieser Tabelle.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.12.2005, 00:44
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.326
AndreasB wird schon bald berühmt werden
Standard

@IChao

Danke für die Aufklärung - auch wenn es eine schlechte Nachricht ist.

Beim Modell mit trennenden Rahmen lässt sich die erwünschte Gestaltung erreichen:

Code:
table{
border-collapse: separate;
border-spacing: 5px; 
background: white;
}
table caption{
background: green;
padding: 0.3em;
margin: 0;
}
table th{
background: red;
padding: 0.3em;
}
table td{
background: yellow;
padding: 0.3em;
}
Mit Tabellengestaltung habe ich bisher nicht viel experimentiert.

Sehe ich es richtig, dass man beim Modell mit trennenden Rahmen nicht erreichen kann, dass
1 links von der ganz linken Spalte,
2 rechts von der ganz rechten Spalte und
3 unter der untersten Zeile
kein Border-Spacing angezeigt wird?
__________________

Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Aktuelle Größe von Tabelle bekommen (dynamische Erzeugung der Tabelle) internet (X)HTML 17 03.12.2014 09:05
Tabelle soll in DIV 100% breit sein jannemann (X)HTML 10 31.08.2011 08:52
Außenabstand: Problem bei TABLE und CAPTION AndreasB CSS 2 23.05.2009 09:59
Tabelle: Zellenhöhe 100% / Zelle zu breit yoitsme CSS 1 02.01.2007 21:00
Caption so breit wie Tabel AndreasB CSS 4 15.11.2006 15:46


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:07 Uhr.