zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden table wird durch tfoot breiter als vorgegeben

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.04.2019, 09:53
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.325
AndreasB wird schon bald berühmt werden
Standard table wird durch tfoot breiter als vorgegeben

Moin.


Testcase:


https://borumat.de/-/testcase-tabellenbreite


Ich habe dort die Tabellenbreite auf 23em begrenzt.


Dennoch wird sie breiter dargestellt.
Offenbar ist tfoot dafür verantwortlich. Wenn ich ihn entferne, stimmt die Breite.


Worin liegt bitte mein Fehler?

Danke.






HTML-Code:
<!doctype html><html lang="de"><head>    <meta name="viewport" content="width=device-width, initial-scale=1"/>    <link rel="icon" href="/img/favicon.svg"><style>th {    text-align: left}th {    font-weight: normal}tfoot ol {    list-style-type: symbols(symbolic "*")}tbody td {    text-align: right}tr {    border-bottom: 1px solid rgb(220,220,220)}thead tr {    border-bottom-width: 3px}tfoot tr {    border-bottom: none}thead:first-child th {    padding-top: 0}td, th {    vertical-align: bottom}td {    white-space: nowrap}table {    border-collapse: collapse;}table {    width: 23.00em}tbody {    margin-bottom: 1.50em}thead th, tfoot td {    padding-top: 2.00em}</style>     <title></title></head><body id="zimmer">        <main id="inhalt">                <table>            <thead>                <tr>                    <th colspan="2"><strong>Durch Schulleitung genehmigte Schulfahrten</strong><br> (Ab-Preis pro Person)</th>                </tr>            </thead>            <tbody>                <tr>                    <th>Mit Selbstversorgung</th>                    <td>17 €</td>                </tr>                <tr>                    <th>Mit Frühstück *</th>                    <td>21 €</td>                </tr>                <tr>                    <th>Bettwäsche (pauschal) **</th>                    <td>8 €</td>                </tr>            </tbody>            <thead>                <tr>                    <th colspan="2"><strong>Gruppen</strong><br> (Ab-Preis pro Person/Nacht inkl. City Tax) **** </th>                </tr>            </thead>            <tbody>                <tr>                    <th>Mit Selbstversorgung </th>                    <td>18 €</td>                </tr>                <tr>                    <th>Mit Frühstück * </th>                    <td>21 €</td>                </tr>                <tr>                    <th>Bettwäsche (pauschal) ** </th>                    <td>8 €</td>                </tr>            </tbody>            <thead>                <tr>                    <th colspan="2"><strong>Einzelreisende</strong><br> (Ab-Preis pro Person/Nacht inkl. City Tax) **** </th>                </tr>            </thead>            <tbody>                <tr>                    <th>Mit Selbstversorgung </th>                    <td>30 €</td>                </tr>                <tr>                    <th>Mit Frühstück </th>                    <td>35 €</td>                </tr>                <tr>                    <th>Bettwäsche</th>                    <td>inkl.</td>                </tr>            </tbody>            <thead>                <tr>                    <th colspan="2"><strong>Gruppenessen</strong><br> (Ab-Preis pro Person) </th>                </tr>            </thead>            <tbody>                <tr>                    <th>Kaltes Mittag- oder Abendessen </th>                    <td>5 €</td>                </tr>                <tr>                    <th>Lunchpakete </th>                    <td>4 €</td>                </tr>                <tr>                    <th>Warmes Mittag- oder Abendessen *** </th>                    <td>5 €</td>                </tr>                <tr>                    <th>Kaffee und Kuchen</th>                    <td>4 €</td>                </tr>            </tbody>            <tfoot>                <tr>                    <td colspan="2">                        <ol>                            <li>Auch Halb- und Vollpension möglich</li>                            <li> Bettwäsche kann auch mitgebracht werden.</li>                            <li> Warmes Essen wird im nahen Restaurant serviert. </li>                            <li>Bestimmte Personen und Gruppen können sich von der <a href="https://www.berlin.de/tourismus/infos/3298255-1721039-city-tax-fuer-berlintouristen-tritt-in-k.html">City Tax</a> befreien lassen.</a>                            </li>                        </ol>                    </td>                </tr>            </tfoot>        </table>    </main></body></html>
__________________

Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.04.2019, 10:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.988
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Das hat nichts direkt mit dem tfoot zu tun sondern damit, dass der Inhalt in deinem tabellen-footer zu groß wird. Tabellen haben standardmäßig display: table, welches sich bei width anders verhält als Blockelemente. Du hast hier mehrere Möglichkeiten die Breite zu begrenzen:
Entweder du setzt ein div mit max-width: 23em um deine Tabelle und die Tabelle dann auf 100% width (das sollte funktionieren, das habe ich aber nicht getestet)

Andererseits geht es auch wenn du "white-space: normal; " der <ol> in deiner Tabelle zuweist. Falls hier auch mehr Elemente stehen können musst du das dann natürlich auch anderen Elementen wie <p> etc. zuweisen.

Hier auch ein weiterführender stackoverflow-post welcher dein Problem beinhaltet:
https://stackoverflow.com/questions/...me-not-working
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.04.2019, 10:52
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.325
AndreasB wird schon bald berühmt werden
Standard

Danke erstmal für Deinen Hinweis.


Mir ist noch nicht klar, was das zu erwartende Verhalten einer Tabelle ist, wenn man ihre Breite setzt.


Denn ohne tfoot wird die Tabelle ja mit 23em dargestellt und dies, obwohl durch die Begrenzung Zeilenumbrüche nötig sind.

Würde sie einfach die gesamte Breite des Elternelementes nehmen, würde sie sich ja auch ohne tfoot "breiter machen".

In den Specs habe ich zum Thema leider auch nix gefunden.


Hier nochmal ein minimales Testcase ohne tfoot:

https://borumat.de/-/testcase-tabellenbreite-2

und eines mit tfoot:

https://borumat.de/-/testcase-tabellenbreite-3


Beide werden mit 23em dargestellt.


Es muss also irgendwas anderes in meinem Code sein, was das Verbreitern verursacht.
__________________

Mit Zitat antworten
  #4 (permalink)  
Alt 02.04.2019, 11:49
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.906
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Du musst das whitespace:nowarp entfernen.
Mit Zitat antworten
  #5 (permalink)  
Alt 02.04.2019, 12:43
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.325
AndreasB wird schon bald berühmt werden
Standard

Manchmal ist man so blind!


Danke! Das war's.
__________________

Mit Zitat antworten
  #6 (permalink)  
Alt 02.04.2019, 16:02
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.988
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Ein weiterer Hinweis:
Du hast eine laut Spezifikation ungültige Tabelle, eine Tabelle kann höchstens ein thead (und auch nur ein tfoot) Element beinhalten.
https://www.w3.org/TR/html/tabular-d...-table-element
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
Mehrere Divs in einem Layer nebeneinander zentrieren..? michaf CSS 14 19.08.2013 01:02
Myspace Fehler zwischen FF und IE? soren.designs (X)HTML 1 05.09.2009 16:02
Myspace problem... Rechte Säule verschiebt sich im IE. calledmarcel CSS 1 27.02.2009 09:12
Myspace-Probleme Nora-B CSS 3 15.09.2008 23:17
Falsche Darstellung im Internet Explorer Janizzle CSS 0 30.08.2007 19:44


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:23 Uhr.